勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

   2024/10/01  JavaScript

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像がスライダー等に組み込まれていた場合、画像が読み込まれずにエラーになるといったケースが偶にある。「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

  関連記事

JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法

以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...

バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法

画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...

JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法

table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...