画像の読み込み順番を指定する(onLoad)

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows -
Macintosh - -
UNIX - - - - -

解  説  画像の読み込み順番を指定するには、あらかじめimgタグでダミーの画像(空白画像)を指定しておきます。ページが構築されたら配列に読み込む順番と対応する画像名を設定しておきます。画像オブジェクトを作成しsrcプロパティで読み込む画像を指定します。画像が完全に読み込まれるとcompleteプロパティがtrueになります。タイマーを使ってcompleteプロパティがtrueになるまで待ち、trueになったら次の画像URLをsrcプロパティに代入します。これで画像が順番に読み込まれます。
コード <html> <head> <title>画像の読み込み順番を指定する(onLoad)</title> <script langauge="JavaScript"><!-- imgNum = ["image0.jpg","image1.jpg","image2.jpg","image3.jpg"]; // ←読み込む順番 imgName= ["num0", "num1", "num2", "num3"]; // ←対応する画像の名前 imgObj = new Image(); count = 0; function setLoadImage() { imgObj.src = imgNum[count]; setTimeout("loadImage()",500); } function loadImage() { if (imgObj.complete && (count < imgNum.length)) { document.images[imgName[count]].src = imgNum[count++]; setLoadImage(); } } // --></script> </head> <body onLoad="setLoadImage()"> 画像の読み込み順番を指定します。<br><br> <img src="blank.jpg" name="num0"> <img src="blank.jpg" name="num1"> <img src="blank.jpg" name="num2"> <img src="blank.jpg" name="num3"> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!