ページで使用する画像を先読みし、先読みした画像を後から表示する方法



以前ページの使用画像読み込み後にJAVASCRIPT処理を実行する記述で書いた
記事内容と似たような感じですが、
ページ上にデフォルトで表示させない画像をJavaScriptで先読みし、
後から(ボタンやリンククリック等で)先読みした画像を表示させる方法です。

1.ヘッダーとJavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
(function(){

	var ifile= new Array();	//以下の画像i01~i10の画像を読込み
	ifile[0]="i01.jpg";
	ifile[1]="i02.jpg";
	ifile[2]="i03.jpg";
	ifile[3]="i04.jpg";
	ifile[4]="i05.jpg";
	ifile[5]="i06.jpg";
	ifile[6]="i07.jpg";
	ifile[7]="i08.jpg";
	ifile[8]="i09.jpg";
	ifile[9]="i10.jpg";
	
	var pimg= new Array();
	for (i=0; i<ifile.length; i++){
		pimg[i] = new Image();
		pimg[i].src = ifile[i];
	}
	
})();

function fncOut(){	//「ここをクリック」リンククリック時に↑で先読した画像を表示
	var str_work=''
+'<div><img src="i01.jpg" width="300" height="300" alt=""><img src="i02.jpg" width="300" height="300" alt=""></div>'
+'<div><img src="i03.jpg" width="300" height="300" alt=""><img src="i04.jpg" width="300" height="300" alt=""></div>'
+'<div><img src="i05.jpg" width="300" height="300" alt=""><img src="i06.jpg" width="300" height="300" alt=""></div>'
+'<div><img src="i07.jpg" width="300" height="300" alt=""><img src="i08.jpg" width="300" height="300" alt=""></div>'
+'<div><img src="i09.jpg" width="300" height="300" alt=""><img src="i10.jpg" width="300" height="300" alt=""></div>';
	$("#idSyutsuryoku").html(str_work);
}
</script>

2.HTMLの記述例

        <p><a href="javascript:fncOut();">ここをクリック</a></p>
        <div id="idSyutsuryoku">ここに読込んだ画像が表示されます。</div>

ページで使用する画像を先読みし、先読みした画像を後から表示するデモ
 

読込む画像容量やブラウザの種類(IE7以前 等)によっては、
ページで使用する画像を先に読込まないと表示されないことがあり
そんな時に使ったりしてましたが、他にも何か良い方法があるんでしょうね。