ＪａｖａＳｃｒｉｐｔ講座(Vol.20)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

１１/２４日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.20★

画像を扱ったプログラムⅢ

前回と今回のプログラムをやってみるとわかると思うけど、画像を表示する時に、画像は全てプログラムを実行する時に読み込んでるんだ。
例えばスライドショーは、１回目の表示の時にはまだ画像を読み込んでいないんだよ。
だから、スライドショーの一回目は画像を読み込みながらプログラムを実行するので少し時間がかかるんだ。
逆に、一度読み込んでしまうとあとのループは早く表示できるんだよ。(実際に見てごらん)
でも、一回目からスムーズに表示してほしいよね。
これを解決するためにプレロードというものを使うんだ。
（※プレロードをしても全体の速さが速くなるわけではない。プログラム実行の時に読み込む代わりに、ページの表示の時（プログラムの前）に読み込むだけのことなので、プログラムを実行した時に読み込ませるか、ページ表示の時にはじめに読み込ませるかの違い。)

★ プレロード(NN(IE4?)のみ) ★

(※NNのみとなっていますが、本によってはIE4から動作するようです。エラーにはならないと思うので、ぜひ覚えておこう。）
プレロード(画像の先行読み込み)をするための命令は次のとおり。
<HEAD>の中で次の命令を書こう。

画像の先行読み込み

　　　　　　　　　　　　　　　　　オブジェクト名 = new Image()
　　　　　　　　　　　　　　　　　オブジェクト名.src = "画像ファイル"

例えば、"1.gif"という画像をページの読み込みと同時に読み込みたい時は、

myImg = new Image();　　←myImgという画像用の領域を作った。
myImg.src = "1.gif";　　　←今作ったmyImgという場所に"1.gif"を読み込ませた。

というふうに書くんだ。
いきなり、myImg.src = "1.gif"を使ってもダメなんだ。
前回までのプログラムの場合、
<img src="1.gif" name="myImg">のようにしてタグの中にmyImgという領域を作ったね。
でも今回のように初めに画像を読み込む場合は、
<img src="1.gif" name="myImg">で指定するよりより先に読み込まないといけないね。
なので、始めに読み込んでおく場合は一番初めに

オブジェクト名 = new Image()

を使って、"オブジェクト名"の領域を作っておかないといけないんだ。
そして、そのオブジェクト名の場所に画像をセットするには、

オブジェクト名.src = "画像ファイル"

こうやって画像ファイルを先に読み込んでおけば、あとはすでに読み込んでいる画像を取り出してくるだけなので、表示が速くなるよね。

じゃあ、プレロードを使ったプログラムを見てみよう。

--マウスで触れると画像が切り替わる--

<HTML>
<HEAD>
<TITLE>画像切り替え</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<a href="#" onMouseOver="mouse_on()" onMouseOut="mouse_off()">
<img src="img1.gif" name="myImg" border="0" align="absmiddle">ボタンに触ってー！
</a>
</BODY>
</HTML>

サンプル

--解説--

<HTML>
<HEAD>
<TITLE>画像切り替え</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<a href="#" onMouseOver="mouse_on()" onMouseOut="mouse_off()">
↑マウスが乗ったら"mouse_on()"、離れたら"mouse_off()"
<img src="img1.gif" name="myImg" border="0">ボタンに触ってー！
↑この画像を表示する場所の名前は"myImg"
</a>
</BODY>
</HTML>

今回新しく出てきた命令を使って、

    on_img = new Image();
    on_img.src = "img2.gif";
    off_img = new Image();
    off_img.src = "img1.gif";

と書く。
上の２つでマウスが乗ったとき用の画像を読み込んでいるんだ。
そして、下の２つでマウスが離れた時の画像を読み込んでいるんだよ。

後も部分はいままで何度もやっているので少しずつわかってきたかな。
今回はリンクを触ったら画像が切り替わるようにしているので、<a href="#" 命令>の形だね。
そして、マウスが乗ったら"mouse_on()"、
このif文の中に、document.imagesというのがあるよね。
これはプレロードに対応していないブラウザのための処置なんだ。
詳しく知る必要は無いけど、これは上で作った名前が利用可能かどうかを調べる命令で、使える(対応している)場合だけ以下の命令を実行するんだ。
その実行文というのが、document.myImg.src="img2.gif";だね。
これは"myImg"という場所に画像を表示する命令だったね。
今回はすでにプログラムの上の方で読み込んでいるので表示が速いはずだよ。
"mouse_off()"の関数についても一緒だよ。

このプログラムは目次などで使えるね。
リストのマークとして使えば、リンクに重なっている時だけ画像を動かすということも可能だよ。
これは、いろいろなページでよく使われているね。