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'));
}