jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2013.8.14

画像読み込み時にローディングを表示する(IE対応)

Category:

以前、「ページ読み込みの際にローディングを表示する」という記事を書きましたが、画像にjqueryの.on("load")を使って対応する場合、IEで画像のキャッシュを持っているとonloadが発生せず、ずっとプリローダーの画像が表示されてしまっているという不具合がありました。

それでは実際使い物にならないので別の方法はないかと探していたところ、画像のパスにユニークな引数をつけてキャッシュ自体を持たないようにするという方法が散見されましたが、この場合毎回重いロードを繰り返すことになるのであまりふさわしくないと考えました。

さらに調べを進めたところ、stackoverflow.comでドンピシャの記事を見つけました

自分が使う場合、要素取得などjQueryでおこなってしまったほうが手っ取り早いので、参考ソースを少しいじってみました。それが以下。

var preload = function(){
	var	img = [],
		img_arr = $('#photo img'), // ローディング対象の画像を指定
		img_arr_lngth = img_arr.size();

	img_arr.each(function(indx){
		img[indx] = new Image();
		img[indx].onload = function(){
			img_arr_lngth = img_arr_lngth - 1;
			if( 0 >= img_arr_lngth ){
				// 最後の画像を読み込み終わった際の動作を指定
				$('#loading').hide();
				$('#photo').fadeIn(500);
			}
		};
		img[indx].src = $(this).attr('src');
	});
};

$('document').ready(function(){
	preload();
});

動作のサンプルはこちら
画像読み込み時にローディングを表示する(IE対応) - js do it

対象の画像の数だけイメージオブジェクトを生成し、その最後の分のロードが完了した段階でプリローダーを隠し、指定の要素(今回は#photoというブロック)を表示する、という動作になります。

IEの場合、イメージオブジェクトにsrcをonloadより先に指定すると、キャッシュを持つ場合にonloadが走らないという癖?があるようですが、srcをonloadより後に指定することでその問題が解決するようでした。これについてはjsdoitの以下の投稿を参考にしました。

IEでの画像のonloadイベントについて - jsdo.it

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.