第59回 「複数の画像をあらかじめ読み込ませる（プレロード）」
今回は複数の画像をあらかじめ読み込ませる（プレロード）について説明します。
一枚だけ特定の画像を読み込ませる場合は以下のプログラムでした。（前回のプログラム）
<html>
<head>
<title></title>
<script language="JavaScript"><!--
prIMG = new Image();
prIMG.src = "photo2.jpg";
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSrc('photo2.jpg')" onMouseout="setImgSrc('photo1.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
複数読み込ませるにはプレロード部分である
prIMG = new Image();
prIMG.src = "photo2.jpg";
を読み込ませる画像の分だけ列記する方法が手軽そうです。コピー＆ペーストで読み込むファイル名などを変更していけば良いでしょう。
以下のプログラムはphoto2.jpg、photo3.jpg、photo4.jpgのプレロードを行います。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
prIMG1 = new Image();
prIMG1.src = "photo2.jpg";
prIMG2 = new Image();
prIMG2.src = "photo3.jpg";
prIMG3 = new Image();
prIMG3.src = "photo4.jpg";
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSrc('photo2.jpg')" onMouseout="setImgSrc('photo1.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
プレロードする枚数が少なければ上記のような力業でも良いのですが、１０枚、２０枚となると大変になってきます。このような場合には以前勉強した「配列」を利用します。
まず、プレロードするファイル名を配列に入れておきます。
fName = ["photo2.jpg","photo3.jpg","photo4.jpg"];
次に画像オブジェクトを入れる配列を用意します。
prIMG = new Array();
prIMG[0].srcにfName[0]の画像ファイル名を入れるように、次々と配列に入れプレロードさせていきます。これはfor命令を使って繰り返し処理をします。
for (i=0; i<fName.length; i++)
{
prIMG[i] = new Image();
prIMG[i].src = fName[i];
}
fName.lengthで配列fNameに入っている画像ファイル名の数を得ることができます。このためfNameで指定する画像ファイル名の数を気にすることなく複数画像のプレロードを行うことができます。
実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
fName = ["photo2.jpg","photo3.jpg","photo4.jpg"];
prIMG = new Array();
for (i=0; i<fName.length; i++)
{
prIMG[i] = new Image();
prIMG[i].src = fName[i];
}
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSrc('photo2.jpg')" onMouseout="setImgSrc('photo1.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
次回はJavaScriptからスタイルシートを制御する方法について説明します。