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

使い方

ダウンロードや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('背景画像の読み込み完了');
});