Webアプリケーションを作っていて、画像を読み込んだタイミングで何か処理を行いたいと思うことは多々あります。しかしこれといった良い方法がなかったように思います。 そんな状況だからこそ紹介したいライブラリがImagesLoadedです。複数の画像を含めて、その読み込み状態を管理できる面白いライブラリです。

ImagesLoadedのインストール

Bowerに対応していますので下記のコマンドでインストールできます。

bower install imagesloaded

ImagesLoadedの使い方

一番簡単な使い方は下のようになります。

imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});

全ての画像要素が読み込まれたコールバックされます。

次は読み込み途中を管理する場合です。progressを使います。

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

そしてさらに読み込み完了を含めてステータスを管理する場合。

var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
  console.log( imgLoad.images.length + ' images loaded' );
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    var image = imgLoad.images[i];
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  }
});

画像要素ごとに image.isLoaded を使ってステータスを管理しています。複数の画像があって読み込まれたらローティングアイコンと差し替えたり、読み込めなかった画像を取得したりできるようになります。

スマートフォンのカメラもあって写真コンテンツは溢れています。その見せ方もImagesLoadedを使うことでより自然にストレスなく表示できるのではないでしょうか。

ImagesLoadedはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

ImagesLoaded desandro/imagesloaded