<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
img=new Array();
for(i=1;i<=4;i++){
img[i]=new Image();
img[i].src="img"+i+".gif";
}
function changeImage(i,j){
document.images[i].src=img[j].src;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR>
<BR>
<A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A>
</CENTER>
</BODY>
</HTML>
マウスオーバーしたら画像が変わるスクリプトです。
質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか?
普通にsrcプロパティを変更するだけではだめなのでしょうか?例えばdocument.images[i].src="img"+j+".gif"のようにしてiとjを変えるような
感じです。
No.1ベストアンサー
- 回答日時:
レスポンスを良くするためだと思います。
上記のやり方だと、初期起動時に全画像を読み込みますが、
>普通にsrcプロパティを変更するだけ
のやり方だと
マウスのイベントが走った時点で、画像の読み込みに行きますから、
キャッシュが無い一回目の動きは、読み込みラグが発生します。
特に画像サイズが大きくて、サーバに上がってる際に違いが出ます。
ローカルで動かしている、又はキャッシュに画像が残ってる状態では、違いは感じられませんが、。
ご回答ありがとうございます^^
なるほどオブジェクトができた段階ではまだ読み込みはしないんですね。
それで軽くなることが利点だとわかりました。
詳しいご説明ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptのhistory.back(戻...
-
Excel VBA マクロ 画像(...
-
小さい写真にマウス置くと拡大...
-
OpenCVを用いたヒストグラムの...
-
診断の作り方
-
サムネイルをクリックして背景...
-
教えて下さい。ランダムにバナ...
-
JSPでの画像ファイル表示
-
スワップイメージで画像ではな...
-
画面が真っ白になるのはどうして?
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
javascriptでオブジェクトの重...
-
htmlの記述で link rel=styles...
-
removeEventListenerについて
-
複数のバナーをリロードする度...
-
画像を切り替えランダム表示
-
【jQuery】2分割レイアウトで、...
-
JQueryでオープニングアニメー...
-
div要素を半透明にして且つ外枠...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
c++std::string型をTCHARに変換...
-
JSPでの画像ファイル表示
-
画面が真っ白になるのはどうして?
-
Javascriptで画像を水面のよう...
-
フォームに入力された値により...
-
クリックして変更した画像を他...
-
日替わりで画像を変更したい
-
クリックするたびに画像を変える
-
C言語のポインタ表現
-
ランダム表示の画像位置
-
教えて下さい。ランダムにバナ...
-
1つの画像クリックで切替の方法
-
【初心者】UWSCでjavascriptで...
-
javascriptで複数の画像をラン...
-
WSHでクリップボードにイメージ...
-
「戻る」「進む」ボタンで画像...
-
onとoffを画像でチェンジ、チェ...
-
Excel VBA マクロ 画像(...
-
クリックした自身の画像を別画...
-
ランダムに画像を表示し、ポッ...
おすすめ情報