lazyに画像のロードをする

lazyに画像のロードをする際のTips

基本的にこれを利用するということはIE8の呪縛に絡まれている場合だと思います。
transformの使えない次元に存在している人向けです。

SampleCode

sample.js

// 画像の先行読み込み
var $img = $('img');

var allImgCount = $img.length;
var imgCount = 0;

for (var i = 0; i < allImgCount; i++) {
	$($img[i]).bind('load', function(){

		// 画像がロードされたらカウント
		imgCount++;

		// 全ての画像がロードされたら
		if(allImgCount === imgCount){

			//処理〜！

		}
	});

	// 各画像にロードイベントをバインドした後にデータ属性をSRC属性へ入れる。
	// ※IE8のキャッシュ対策です。
	$(options.$modalImgItem[i]).attr('src', $img.attr('data-src'));
}