[ajax/pjax]複数枚の画像読み込み後に処理を実行する

概要

jQueryのpjaxやajaxを使って遷移をしたとき、複数枚の画像読み込み(imgObj.onload)後に処理を実行する方法を紹介します。

基本的に、pjaxやajaxには、onloadイベントはありません（似たようなのはあります）。なので、window.onloadではなく、imgObj.onloadを使います。

１：要素を取得する

まず、ターゲットとなる画像を普通に取得します。このとき、pjaxの場合、pjax:complete後に、ajaxの場合、success後に実行します。

// 画像は３つのli要素の中にそれぞれ1枚あるとします。
var img_elm = $('li img');

２：Imageオブジェクトをつくる

要素を取得したらImageオブジェクトをつくります。$eachで３枚分つくってます。

createImgObj(img_elm);

function createImgObj(img_elm) {
    num = img_elm.length - 1; // 最後の画像のindexをもっておく
    img_elm.each(function(i, elm) {
        imgObj[i] = new Image();
        imgObj[i].src = elm.src;
    });
}

３：最後の画像が読まれた時に処理を実行する

最後の画像が読まれたらflgをtrueにします。setIntervalで連続で実行している処理をつくっておいて、flgがtrueになったらそれをとめ、実行したい処理を好きに書きます。

imgObj[num].onload = function() {
    setSlider(function(){flg = true;});
}

var timer = setInterval(function() {
    if(flg) {
            clearInterval(timer); // setIntervalをとめる
            // 画像読み込み後に実行したい処理。
    }
},1);

これにて、ajax/pjax遷移でも、画像読み込み後に処理を実行することができます（もっと良いやり方あれば教えて下さい）。