第58回 「画像をあらかじめ読み込ませる（プレロード）」
今回は画像をあらかじめ読み込ませる（プレロード）について説明します。
ボタン画像の上にマウスが乗ったら画像が切り替わる場合に、低速回線や回線が混雑している場合などには、マウスを載せても画像を読み込むまでに時間がかかるため、すぐに画像が表示されない事があります。これを防ぐには画像データをあらかじめ読み込ませておくという方法＝プレロードです。
プレロードさせるには、まず「画像オブジェクト」を作成しなければなりません。以前に配列を作成した時にも使ったnewで以下のように書きます。
prIMG = new Image()
これで画像オブジェクト(prIMG)が生成されます。このようにして作成された画像オブジェクトは前回までにやった<img>タグでの画像オブジェクトと変わりません。大きく違うのは故意に表示処理をしない限りは画面上には表示されないところです。画面上には表示されないので画像をひそかに読み込ませておくには便利です。
肝心の画像を読み込ませる方法ですがphoto2.jpgを読み込ませるには以下のように書きます。
prIMG.src = "photo2.jpg"
これでphoto2.jpg画像が読み込まれます。
実際のプログラムは以下のようになります。
<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>
この書き方だとプレロードする画像も含めて全てのデータの読み込みが完了しないと完全にページが構築された事になりません。bodyタグのonLoad処理はプレロード画像も含めて読み込みが完了しないとイベントが発生しません。
Adobe GoLiveなどのサイト構築／ページ作成ソフトに用意されているプレロードは、上記のものとは違い先にHTMLレベルで指定されているデータを読み終わってから（bodyタグのonLoadを使って）プレロード処理を行っています。この方法だとプレロード処理にかかる時間を含めないため素早くページが表示されるというメリットがあります。逆にユーザーが、ボタン画像の上にページ構築後すぐに乗せてしまったりして画像を切り替えなければいけない場合には画像が表示されない場合もあります。
ここらへんは状況によって良いと思われる方法を採れば良いでしょう。もっとも、そうこうしているうちにインフラが整備されて、そういう問題も少なくなってしまう可能性の方が高いかもしれません。
先にページを構築しておいてから読み込ませる場合のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function preload()
{
prIMG = new Image();
prIMG.src = "photo2.jpg";
}
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body onLoad="preload()">
<a href="#" onMouseover="setImgSrc('photo2.jpg')" onMouseout="setImgSrc('photo1.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
今回はプレロードさせる画像が１枚しかありませんでしたが、実際には任意のファイル名の任意の数の分だけ読み込ませるのが普通です。
次回は複数画像のプレロード処理について説明します。