JavaScriptの画像プリロード

色々なサイトでjavascriptで複数の画像をプリロード(ローディング)する方法が公開されているが、中でも簡単そうなのを覚書。

特長は
・まあシンプルな方
・IEのキャシュ対策済み
・進捗状況の表示が可能(ファイルサイズが小さいと一瞬で表示が終わるけど)

※プログラム初心者のため、このページのプログラムソースは正常に動作しない事がありますご注意下さい。
（あっちこっちのサイトの情報を寄せ集めてるので思わぬ不具合があるかも）

プログラム概要

var img =[];
//読み込み済みカウンター
var count=0;

//読み込む画像ファイル名
var filename=[];
filename[0]="image_a.jpg";
filename[1]="image_b.jpg";
filename[2]="image_c.jpg";
filename[3]="image_d.jpg";

//プリロード
for(var i = 0; i < filename.length; i++){
	img[i] = new Image();
	img[i].onload = function() {

		//画像が読み込み完了ごと起動(プログラムメインとは非同期) 
		count++;
		//＃1
		if (count == filename.length){
			//全部読み込みが完了した時の処理＃3
		}

	}
	img[i].src = filename[i];	//#3
}

・onload部分(＃1)はプログラムメインと非同期なので、プログラムは画像を使う前で一旦停止して＃2を待つ必要がある。
・＃1にinnerHTMLなどで「count/(filename.length)*100」とすれば進捗状況(%)が表示できる
・＃3は、onloadの前に持ってくるのが一般的な書き方だけど、InternetExplorerで画像がキャッシュされた状態だと正常に動作しないのであえて後ろに持って行きている。

サンプルプログラム
＞http://www.achiachi.net/objectvr/javascript_test/preload.html