- ベストアンサー
複数の画像を先に読み込ませ表示を早くしたいのですが。
はじめまして、Javascriptはほとんどわからないので教えていただけないでしょうか？ WEBサイト制作で、複数の画像を読み込ます事で画像の表示を早くすることができると聞いたのですが調べても思うものを見つけることができませんでした。 ロールオーバー時の画像を先に読み込ませて、Windowsでの砂時計の表示を無くしたいのです。（クライアントからの指示で） <body>タグにonloadを付けることでJavascriptを呼び出す方法らしいのですが詳しいことがわかりません。 Javascriptの記述方法と<body>タグでの呼び出し方を教えていただけないでしょうか？ よろしくお願いします。
- yume0007
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは javascriptでするなら画像の先読みになります http://lion.zero.ad.jp/inn/js/image/image-preload.html 数が少ないのであればCSSでもできます(先読みではないですけど） 例えば幅50pxの画像(A.gif(デフォルト)とB.gif(ロールオーバー))があったとすると それを同じ画像ファイルにして（[AB]といった感じ）C.gif(幅100px)で保存 <style type="text/css"><!-- a { width:50px; background-image:url(C.gif); background-repeat:no-repeat; background-position:0px; } a:hover { background-position:-50px; } --></style> <a href="">ロールオーバー</a> という感じでも出来ます クライアントがいるということは改変しにくいかな？（－－；）
その他の回答 (2)
- venzou
- ベストアンサー率71% (311/435)
＃１に挙げたサイトのサンプルは全て、画像の先読み（プレロード）を含んでいます。 例えば、一つ目のURLのサンプルでは、 preImg = new Image(); preImg.src = "sample2.gif"; ↑この部分で画像の先読みを行っています。 これで先読みしてくれます、簡単すぎて気づかなかったのかな。（＾＾； 上記のように、先読みするには、Imageオブジェクトを作り、そのソース(src)に先読みしたい画像を指定します。 スクリプトの実行は、関数定義内ではなく、スクリプト内に直接記述することで実行されます。onloadは使いません。
お礼
ご回答ありがとうございました。 遅くなり申し訳ありませんでした。 理解力不足でご迷惑をお掛けしました。
- venzou
- ベストアンサー率71% (311/435)
プレロードと呼ばれます。「javascript プレロード」のキーワードで検索すれば解説しているサイトが見付かると思います。 幾つか参考になりそうなサイトを挙げておきます。 マウスが重なったら画像を入れ替える(プレロードあり) http://www.salut.ne.jp/wmh/tool/js/j013/demo.html ↑基本的なサンプルです。 オンマウスで画像を入れ替える(プレロード) http://javascript.eweb-design.com/0811_mci.html ↑画像ファイル名を配列に入れているので、画像が多い場合はこれを参考に。 ＪａｖａＳｃｒｉｐｔ講座 http://homepage2.nifty.com/yoshi-m/makehp/javascript/lesson/24.htm ↑古い情報のようですが、解説は分かりやすいかも。 ＞<body>タグにonloadを付けることでJavascriptを呼び出す方法らしいのですが詳しいことがわかりません。 上記のサイトのサンプルでは、onloadは使っていません。onloadを使う方法もあるかも知れませんが、使わなくても大丈夫です。
補足
ご回答ありがとうございます。 ロールオーバーはすでにCSSの方でコントロールできているので、画像だけを先に読み込ませたいのです。 質問の仕方が間違っていたかもしれないです、ごめんなさい。
お礼
遅くなり申し訳ありませんm(__)m 無事解決いたしました、ありがとうございました