jQueryで画像のsrc変更するタイミングでローディングを出しちゃう!

jQueryでsrcを変更した場合、ユーザーにロード状況を知らせるためにローディングを出したい時ありますよね、はいあります!

ページローディングの場合は$(window).loadで簡単に出来ます。

$(window).load(function () { //全ての読み込みが完了したら実行
  //読み込み後の処理
});

今回は画像のsrcを同時に2箇所変更するケースで、2つの画像が読み込まれて初めて画像を表示します。
その間ローディングも表示してユーザーにお知らせもしちゃいます。

html

<img src=hoge1.png>
<img src=hoge2.png>

javascript

//ここでローディングを出す処理
console.log('loading');//テストでコンソールにloadningを出力

//Imageオブジェクトを2つ生成
var img1= new Image();
var img1Src = 'img1.png';

var img2 = new Image();
var img2Src = 'img2.png';

//画像が読み込み終わったらonloadが実行される
img1.onload = function () {
	//読み込み完了フラグをON
	img1Loadedflg= true;
}
img2.onload = function () {
	//読み込み完了フラグをON
	img2Loadedflg = true;
}


//ここでサーバから画像を読みに行き読み終わった段階でonloadがある場合はonloadを実行する
img1.src = 'img1.jpg';
img2.src = 'img2.jpg';

//2つの画像の読み込み完了フラグがtrueになるかを監視して読み込みが完了したら画像を表示する
setTimeout(function() {
	if (img1Loadedflg && img2Loadedflg) {
		//ここで初めて対象のimgにsrcをセットする
		$('#img1').attr('src', img1Src );
		$('#img12').attr('src', img2Src );

		//ここでローディングを終了する処理
		console.log('ok');//テストでコンソールにokを出力
	}
	else {
		//2つの画像が読み込まれていない場合はsetTimeoutを再実行
		setTimeout(arguments.callee, 100);
	}
}

説明

初めにImageオブジェクトを作成します、ついでに画像のsrcを変数にセット。

//Imageオブジェクトを2つ生成
var img1= new Image();
var img1Src = 'img1.png';

var img2 = new Image();
var img2Src = 'img2.png';

次にImageオブジェクトのsrcに読み込む画像のsrcをセットします。

//ここでサーバから画像を読みに行き読み終わった段階でonloadがある場合はonloadを実行する
img1.src = 'img1.jpg';
img2.src = 'img2.jpg';

画像の読み込み後にonloadイベントがセットされている場合はonloadイベントを実行

//画像が読み込み終わったらonloadが実行される
img1.onload = function () {
	//読み込み完了フラグをON
	img1Loadedflg= true;
}
img2.onload = function () {
	//読み込み完了フラグをON
	img2Loadedflg = true;
}

onload実行後=(画像が読み込まれて画像ファイルがキャッシュに保存された)ということにります。
作成したImageオブジェクトはhtmlには描画されません、イメージオブジェクトのsrcに設定されて画像がキャッシュされた状態です。
2つの画像が読み込まれたかどうかをsetTimeoutで常に監視して、両方が画像が読み込まれたらローディングオフ等の処理を実行します。

//2つの画像の読み込み完了フラグがtrueになるかを監視して読み込みが完了したら画像を表示する
setTimeout(function() {
	if (img1Loadedflg && img2Loadedflg) {
		//ここで初めて対象のimgにsrcをセットする
		$('#img1').attr('src', img1Src );
		$('#img12').attr('src', img2Src );

		//ここでローディングを終了する処理
		console.log('ok');//テストでコンソールにokを出力
	}
	else {
		//2つの画像が読み込まれていない場合はsetTimeoutを再実行
		setTimeout(arguments.callee, 100);
	}
}