JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像がスライダー等に組み込まれていた場合、画像が読み込まれずにエラーになるといったケースが偶にある。「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で確認済み)。
関連記事
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...
-
JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...
-
ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...
-
JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...