画像読み込み後に処理を行う

画像が読み込まれたら何か処理を行う実装をしていたのですが、chromeとIEでの対応に少し実装で詰まったので方法をメモしておきます。

うまくいかなかったコード

画像が読み込まれたらconsoleを出してみます。

HTML

<img src="img/img_480310_01.jpg">
<img src="img/img_480310_02.jpg">
<img src="img/img_480310_03.jpg">
<img src="img/img_480310_04.jpg">
<img src="img/img_480310_05.jpg">

JavaScript

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
	images[i].onload = function() {
		console.log('読み込み完了');
	}
};

画像が読み込まれた後に処理を行うデモページ
　

上記をjQueryで実装した場合は以下になります。

JavaScript

$(function() {
	for (var i = 0; i < $('img').length; i++) {
		$('img').eq(i).load(function() {
			console.log('読み込み完了');
		});
	};
});

画像が読み込まれた後に処理を行うデモページ2
これで問題ないかと思っていたのですが、chromeやIEで2回目以降見た時にうまくいかない場合がありました。
2回目以降でキャッシュが残った状態だと、JavaScriptが実行される前に読み込みが完了してしまい、うまくいかないことがあるようです。
　

修正後のコード

img要素を作成して、そのimgが読み込まれたら処理を行うようにして対応しました。

JavaScript

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
	var img = new Image();
	img.onload = function() {
		console.log('読み込み完了');
	}
	img.src = images[i].src;
};

画像が読み込まれた後に処理を行うデモページ3
　

jQuery版も同じ形で対応できます。

JavaScript

$(function() {
	for (var i = 0; i < $('img').length; i++) {
		var img = $('<img>');
		img.load(function() {
			console.log('読み込み完了');
		});
		img.attr('src', $('img').eq(i).attr('src'));
	};
});

画像が読み込まれた後に処理を行うデモページ4
今回は各画像の読み込み後に処理を行いたかったのでこのようにしましたが、ページ全体の画像が読み込まれたら処理を行う場合は、$(window).load(function() { ～ }) で実装できます。
　

【参考サイト】

• javascript – image.onload event and browser cache – Stack Overflow
• IEでキャッシュされた画像でloadイベントが発火しないのを防ぐ方法 | Javascript | mgzl.jp