複数の画像をあらかじめ読み込む(プレロード)


動作ブラウザ 【 IE:4.0  NN:3.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × - -
Macintosh × - × - -
UNIX - - - - - × - - -
Dreamcast - - - - - - - - - - -

ポイント data = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); prImg= new Array(); for (i=0; i<data.length; i++) { prImg[i] = new Image(); prImg[i].src = data[i]; }
説  明 複数の画像をプレロードするには、読み込む画像ファイル名を配列変数に入れておきます。画像オブジェクトをnew Image()で作成しsrcプロパティで読み込む画像URLを指定します。これを読み込む画像の枚数分繰り返します。
サンプル <html> <head> <title>複数の画像をあらかじめ読み込む(プレロード)</title> <script language="JavaScript"><!-- count = 0; data = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); prImg= new Array(); for (i=0; i<data.length; i++) { prImg[i] = new Image(); prImg[i].src = data[i]; } function nextImg() { count++; count %= data.length; document.myIMG.src = data[count]; status = count; } // --></script> </head> <body> <a href="javaScript:nextImg()"> <img src="img1.jpg" name="myIMG"> </a> </body> </html>
補足説明 Dream Passport 2,3では、キャッシュシステムの都合により、操作する画像自体にsrcプロパティを使って画像URLを指定しないと、プレロードしても全く効果がありません。(プレロードはできるが事実上、効力がない)

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

写真素材 PIXTA