23
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-11-06

概要

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:最後の画像が読まれた時に処理を実行する

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

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

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

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

23
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?