1. TOPページに戻る
  2. Javascript
  3. 画像ロードを判定するプラグイン「imagesLoaded」

画像ロードを判定するプラグイン「imagesLoaded」

画像を読み込んだら処理を実行するJSのプラグイン「imagesLoaded」の紹介です。

画像を読み込んだあとになにか別の処理をするということをしたかった際に見つけたJSプラグインです。jQueryありでもなしでも動くようです。

使い方

ダウンロードやCDNを使ってimagesLoadedを読み込みます。そのあとimagesLoadedを使って処理を書きます。

オプションで

  1. 「画像が全て読み込んだら」
  2. 「全ての画像の読み込むのが正常だったら」
  3. 「読み込めない画像があった場合」
  4. 「画像をひとつずつロードの完了を検知」

という処理ができます。

以下のサンプルコードはimagesLoadedサイトにあるものを少し編集したものになります。

<script src="imagesloaded.pkgd.js"></script>

<script>
//基本
$('#container').imagesLoaded( function() {
  // 画像ロードしたあとの処理
});

//オプション
$('#container').imagesLoaded()
	.always( function( instance ) {
	console.log('画像が全て読み込んだら');
	})
	.done( function( instance ) {
	console.log('全ての画像の読み込むのが正常だったら');
	})
	.fail( function() {
	console.log('読み込めない画像があった場合');
	})
	.progress( function( instance, image ) {//画像をひとつずつロードの完了を検知
		var result = image.isLoaded ? 'loaded' : 'broken';
		console.log( 'image is ' + result + ' for ' + image.img.src );
	});
</script>

jQueryを使わないコードサンプルもimagesLoadedのサイトにあります。

背景画像の指定

また、CSSで背景に使用した画像の検知もできます。

$('#container').imagesLoaded( { background: true }, function() {
  console.log('背景画像の読み込み完了');
});