JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
2024/10/01
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像がスライダー等に組み込まれていた場合、画像が読み込まれずにエラーになるといったケースが偶にある。「imagesLoaded」ライブラリも使用すると画像読み込み完了のタイミングが検知できるのでその辺りの問題を解決できそう。以下に利用方法をメモ。
imagesLoaded
公式サイト
https://imagesloaded.desandro.com/
GitHub
https://github.com/desandro/imagesloaded
CDN
CDNで使う場合は以下を記述する。
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
サンプル
https://taitan916.info/sample/imagesLoaded/
画像読み込み完了後にアラートが表示される筈。
利用方法
ソースコード
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script>
//バニラJSの場合
imagesLoaded( document.querySelector('.img_area'), function( instance ) {
alert('画像読み込み完了');
});
//jQueryの場合
$('.img_area').imagesLoaded( function() {
alert('画像読み込み完了');
});
</script>
所感
今までだと苦肉の策でsetTimeoutで対応していたが、このライブラリで解決できた(slickで確認済み)。
関連記事
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...