- ベストアンサー
イメージをあらかじめ読み込むには？
マウスカーソルが重なったとき、イメージを切り替える処理を 行おうと思っています。 <img src="top_01.gif" onMouseOver="this.src='top_02.gif'" onMouseOut="this.src='top_01.gif'"> このようなソースでイメージを切り替えているのですが、 マウスカーソルが重なったときに初めて新しいイメージ (この場合は'top_02.gif')を読み込むようです。 これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、 あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか？
- oom
- お礼率29% (26/87)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
少々強引ですが <body> <img src='top_01.gif' width='0' height='0'> <img src='top_02.gif' width='0' height='0'> </body> と書いてみてはいかがでしょうか？ たて横サイズ0の絵としてあらかじめ同じHTMLで表示させてしまえばタイムラグは改善されるのでは？と思いますが…
その他の回答 (4)
- Ujiki
- ベストアンサー率37% (38/101)
少し寝不足気味ですので、日本語が変かもしれません。ごめんなさい。JavaScriptで、NS4、NS6、IE4、IE5、IE6をカバーするものを紹介しておきます。 まず、お気に入りの PreLoad Image Script を決めます。 「 progressbar.js 」を個人的には気に入っています。(yahoo米国で検索すれば、もうどれがルーツだか判らないですね。(^^) http://scriptasylum.com/miscpage.html <script language="javascript" src="progressbar.js"></script> でインクルードして、実は progresbar.js を活用するスクリプトも色々あるようです。 http://www.dynamicdrive.com/dynamicindex4/ に２つ利用例があります。個人的には、 http://www.dynamicdrive.com/dynamicindex4/preloadimage2.htm を使いたいですね。(実際に使っていますよ) IEでもNSでも動作します。(^^) var Slides = new Array( 'top_01.gif', // コメント１ 'top_02.gif', // コメント２ 'top_xx.gif' // コメントｘ ); と、簡単に追加できますね。 最後に、面白いページを紹介しておきます。そのものズバリのカンニング用URLをご紹介しましょう。以下の参考URLです。「＃Ｘ」には基本画像ファイル、「ＭＯＩＸ」にはマウスが通過した際の画像、そして「ＵＲＬＸ」にはクリックした場合のリンク先ですね。「Done! Make My Script!」ボタンを押せば、実力に関係なく出来上がります。(^^) 電子メールアドレスの入力フォームがありますが、小生なら間違っても入力しません。コピー／貼り付けで処理しましょう。(^^);
- lmeelm
- ベストアンサー率52% (18/34)
<HTML> <HEAD> <TITLE>先行読込み</TITLE> <SCRIPT Language="JavaScript"> <!-- sFile = new Image(); sFile.src="sakiyomi0.gif"; sFile.src="sakiyomi1.gif"; sFile.src="sakiyomi2.gif"; // --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> これでどうでしょうか？？
お礼
解答ありがとうございます。 ご返事が遅くなり、大変申し訳ありません。 ちょっと今たてこんでおりまして、 実際に試してみるのが遅れてしまいますが、 たくさんの方から解答を頂いたので、 全て試してみて考えさせていただきます。
- howsike
- ベストアンサー率58% (18/31)
こんばんわー 問題は解消されているようですがJavaScriptであたらしい画像を読み込みを 実現させるときの手段もあるようなので紹介します。 http://tohoho.wakusei.ne.jp/wwwxx001.htm こちらのページで「マウスを乗せると絵が変わる」でソースを参照されてみては どうでしょうか‥‥
お礼
解答ありがとうございます。 ご返事が遅くなり、大変申し訳ありません。 このサイトはよく参照させて頂いていたのですが、 見落としていたようです。 試してみます。
- Mizyu
- ベストアンサー率41% (245/593)
宣言を先に行っておけばできるはずです。 ------------------------------------------ <script language="JavaScript"> var top_01; var top_02; top_01 = 'top_01.gif'; top_02 = 'top_02.gif'; </script> <img src="top_01.gif" onMouseOver="this.src=top_02" onMouseOut="this.src=top_01"> ※未テストです。
お礼
回答ありがとうございます。 試してみましたが、読み込まれないようです・・・。
お礼
回答ありがとうございます。 この方法は考えてはいたんですが、試したことはありませんでした。 実際試したところ、うまくいきました。 ただ、サイズを０にしても、オブジェクトの痕跡(？)は残るんですね・・・。 画面を反転させると、１バイト文字分くらいの空間が・・。
補足
ただ、サイズを０にしても、オブジェクトの痕跡(？)は残るんですね・・・。 画面を反転させると、１バイト文字分くらいの空間が・・。 ↑と書いてしまいましたが、 STYLE="display:none" と、スタイルシートを使用することで解消できました。 どうもありがとうございます。