概要
jQueryのpjaxやajaxを使って遷移をしたとき、複数枚の画像読み込み(imgObj.onload)後に処理を実行する方法を紹介します。
基本的に、pjaxやajaxには、onloadイベントはありません(似たようなのはあります)。なので、window.onloadではなく、imgObj.onloadを使います。
1:要素を取得する
まず、ターゲットとなる画像を普通に取得します。このとき、pjaxの場合、pjax:complete後に、ajaxの場合、success後に実行します。
// 画像は3つのli要素の中にそれぞれ1枚あるとします。
var img_elm = $('li img');
2:Imageオブジェクトをつくる
要素を取得したらImageオブジェクトをつくります。$eachで3枚分つくってます。
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;
});
}
3:最後の画像が読まれた時に処理を実行する
最後の画像が読まれたら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遷移でも、画像読み込み後に処理を実行することができます(もっと良いやり方あれば教えて下さい)。