複数の画像を先に読み込ませ表示を早くしたいのですが。

Question

はじめまして、Javascriptはほとんどわからないので教えていただけないでしょうか？

WEBサイト制作で、複数の画像を読み込ます事で画像の表示を早くすることができると聞いたのですが調べても思うものを見つけることができませんでした。
ロールオーバー時の画像を先に読み込ませて、Windowsでの砂時計の表示を無くしたいのです。（クライアントからの指示で）

<body>タグにonloadを付けることでJavascriptを呼び出す方法らしいのですが詳しいことがわかりません。

Javascriptの記述方法と<body>タグでの呼び出し方を教えていただけないでしょうか？
よろしくお願いします。

leap_day · Accepted Answer

こんにちは

javascriptでするなら画像の先読みになります
http://lion.zero.ad.jp/inn/js/image/image-preloa …

数が少ないのであればCSSでもできます(先読みではないですけど）

例えば幅50pxの画像(A.gif(デフォルト)とB.gif(ロールオーバー))があったとすると
それを同じ画像ファイルにして（[AB]といった感じ）C.gif(幅100px)で保存

<style type="text/css"></style>

<a href="">ロールオーバー</a>

という感じでも出来ます

クライアントがいるということは改変しにくいかな？（－－；）

venzou · Answer

＃１に挙げたサイトのサンプルは全て、画像の先読み（プレロード）を含んでいます。

例えば、一つ目のURLのサンプルでは、

preImg = new Image();
preImg.src = "sample2.gif";

↑この部分で画像の先読みを行っています。
これで先読みしてくれます、簡単すぎて気づかなかったのかな。（＾＾；


上記のように、先読みするには、Imageオブジェクトを作り、そのソース(src)に先読みしたい画像を指定します。


スクリプトの実行は、関数定義内ではなく、スクリプト内に直接記述することで実行されます。onloadは使いません。

venzou · Answer

プレロードと呼ばれます。「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を使う方法もあるかも知れませんが、使わなくても大丈夫です。

複数の画像を先に読み込ませ表示を早くしたいのですが。

こんにちは

＃１に挙げたサイトのサンプルは全て、画像の先読み（プレロード）を含んでいます。

プレロードと呼ばれます。

この回答への補足

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング