【JavaScript】複数の画像の読み込みが完了した時のイベントを感知するには？？

javascript

複数のイメージ画像を読みが完了した時のイベントを感知するにはどうしたらいいのだろう！？ということでメモしておく。



やりたいこと

すべての画像を最初は非表示にしておき、すべての画像が読み込み完了した時点で「すべて読み込みました」と表示して、その後に画像を一気にフェードインするような仕組みにしてみる。

いつもは、js do itにてサンプルを作るのですが、どうやらjs do itではloadイベントが発動しないので、htmlでサンプルページを作りました。

JavaScriptで複数のイメージ画像を読みが完了した時のイベントを感知する

実際のコード

とりあえずhtml・CSS・JavaScriptの必要最低限のコードを載せていきます。

htmlのコード

htmlのコードは読みこんだ枚数を表示するためのpタグと画像の読み込みが完了のpタグ。後は画像を80枚ちょっと並べてるだけです。








すべての画像を読み込みが完了しました。

CSSのコード

CSSでは、最初は画像と、画像がすべて読み込まれたら表示させる文字を最初は非表示にしておきます。


img{
	display:none;
	}
			
p#res{
	display:none;
	}

JavaScriptとjQueryのコード

JavascriptとjQueryのコードを記載。DOMオブジェクトの取得とアニメーション操作はjQueryを使用。

	
	
	//必要なデータを変数に入れる
	var all_img=$("img");
	var img_len=allimage.length;
	var loaded_counter=0;
	
	//すべての画像にロードイベントを設定
	for(var i=0; i

コードの解説


htmlとCSSの記述に関しては、特に説明がいらないと思うので省きます。


必要なデータを変数に入れる


まず、必要なデータを変数にいれます。


	
	
	//必要なデータを変数に入れる
	var all_img=$("img");
	var img_len=all_img.length;
	var loaded_counter=0;
	  






all_img
画像のDOMオブジェクトの入れる為の変数。複数なので配列




img_len
読み込む画像の長さを保持した変数




loaded_counter
読み込みが完了したらカウントをとる為の変数





すべての画像にloadイベントを設定


変数を設定したら、画像1枚1枚にloadイベントを設定したいので、for文で画像全部にaddEventListerでloadイベントを設定します。


	
	//すべての画像にロードイベントを設定
	for(var i=0; i

画像読み込み完了後にフェードイン


loadイベントは読み込み後に発生するので、その時に変数loaded_counterをインクリメント（++）で+1を加算させていき、画像の長さである変数img_lenと同じ値になった場合は、すべて読みこんだという事になります。


読み込みがすべて完了しましたら、jQueryのfadeInメソッドで読み込み完了の「すべての画像を読み込みが完了しました。」という文字を表示させて、表示が完了したらすべての画像もfadeInメソッドで表示させています。



	//画像読み込み完了後にフェードイン
	function loadFunc(){
		loaded_counter++;
		$("#num").text("読み込まれた画像の数　：　"+loaded_counter);
		if(img_len==loaded_counter){
			$("#res").fadeIn(500,function(){
				$(all_img).fadeIn(1500);
			});
		}
	}

    	



といった感じで、まぁポイントは画像の総数とカウンター変数との値が一致したら画像の読み込みがすべて終わったよ～って感知する事ができるという感じですね。