Javascript/オンマウスで画像を変える

質問

洋服のネットショップを作成中です。
一つのタイプで数色ある洋服（例えば、黒、白、赤、青の4種類）の場合、「Javascriptのオンマウスで画像を変えるhttp://www.aimix.jp/javascrip.html」を利用し、「黒」「白」「赤」「黒」と表示された部分にマウスをあてると、洋服の画像が変わるようにしたいと思っています。
この場合、そのページは画像1枚毎に重く(開く時間が長く)なっていくのでしょうか。
つまり、色が4色の場合と色が10色の場合とでは、表示されている画像は一枚ですが、開く時間は4画像分と10画像分の違いが発生するのでしょうか。
ご存知の方、教えていただければ幸いです。

回答No.1

fab76

実体としての画像データは、置き換えるデータ分だけ存在するのですが、JavaScriptがonMouseイベントでHTMLに表示するのは、どんなときでも条件にあった1枚の画像だけです。

同名の連番（xx1.gif～xx4.gif)や配列内の画像(xx[0],xx[1],…）などの画像データのうち、イベントで発生した条件にあったものだけ引っ張ってくる…、といった仕組みです。

JavaScriptはイベントが起こらなければ何も起こしませんので、この場合は読み込み時にはこれらのいずれの画像データも（デフォルト値を除いて)表示時に読み込みません。

ただし、PreloadImagesで他の画像を先に読み込ませている場合は除きます、この場合は画像データの種類分、ページの表示は遅くなります。確認してみるといいでしょう。