ベストアンサー

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

2007/10/03 18:10

はじめまして、Javascriptはほとんどわからないので教えていただけないでしょうか？ WEBサイト制作で、複数の画像を読み込ます事で画像の表示を早くすることができると聞いたのですが調べても思うものを見つけることができませんでした。ロールオーバー時の画像を先に読み込ませて、Windowsでの砂時計の表示を無くしたいのです。（クライアントからの指示で） <body>タグにonloadを付けることでJavascriptを呼び出す方法らしいのですが詳しいことがわかりません。 Javascriptの記述方法と<body>タグでの呼び出し方を教えていただけないでしょうか？よろしくお願いします。

yume0007
お礼率66% (2/3)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2007/10/03 22:40 回答No.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"></style> <a href="">ロールオーバー</a> という感じでも出来ますクライアントがいるということは改変しにくいかな？（－－；）

質問者

お礼 2007/10/18 10:55

遅くなり申し訳ありませんm(__)m 無事解決いたしました、ありがとうございました

その他の回答 (2)

venzou
ベストアンサー率71% (311/435)

2007/10/03 19:03 回答No.2

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

質問者

お礼 2007/10/18 11:07

ご回答ありがとうございました。遅くなり申し訳ありませんでした。理解力不足でご迷惑をお掛けしました。

venzou
ベストアンサー率71% (311/435)

2007/10/03 18:41 回答No.1

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

質問者

補足 2007/10/03 18:44

ご回答ありがとうございます。ロールオーバーはすでにCSSの方でコントロールできているので、画像だけを先に読み込ませたいのです。質問の仕方が間違っていたかもしれないです、ごめんなさい。

関連するQ&A

Dreamweaverでimageのロールオーバー
Dreamweaverを使ってimageボタンのロールオーバーを指定すると <head>内に記述されるjavascriptのほか、<body>タグの中にも以下のタグが記述されます。 <body onLoad="MM_preloadImages('menu1_over.gif','menu2_over.gif')"> ()内のgif名はボタンがover時の画像名ですが、ロールオーバーするボタンが膨大だと <body>タグ内も膨大なソース量になってしまいます。試しに削除してみたところIEでは正常にロールオーバーが動作します。上記の記述は何を意味しているのでしょうか。不足な情報があれば補足させていただきますので、お知恵をお貸し下さい。
- 締切済み
- ホームページ作成ソフト
複数画像のランダム複数表示（秒で切り替え）
いつもお世話になっております。 JavaScript初心者です。今回、複数ある画像をランダム表示することになり、いろいろと検索してみたのですが、なかなかうまくいきません。今回の仕様は以下の通りです。・総画像数：20枚・表示画像数：5枚（20枚がランダム表示）・5秒ごとに切り替え・重複表示不可・<body>タグ内はテンプレートとなっているため、記入不可能上記がすべて叶うサンプルを見つけることができませんでした。ご教示いただけましたら幸いです。よろしくお願いいたします。
- 締切済み
- JavaScript
<body onload=""> と window.onload
JavaScriptのonload処理についての質問です。現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。（こんな感じで記述　<body onload="hoge();hogehoge();"> 　hogehoge()がたまに呼ばれないことがある・・・）これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」という話を聞きました。（こんな感じで記述　<script> 　　　window.onload = function(){ hoge();hogehoge(); } 　</script> ）「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」なんてことがあるのでしょうか？「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。知識として知っている方がいれば是非教えていただきたいです。よろしくお願い致します。 ※ブラウザはIEを使用　バージョンは　IE → 6.0 　　　　 JavaScript → 1.1　です。　
- 締切済み
- JavaScript
リンク先がそれぞれ別の画像のローテーション表示
3枚の画像をタイマー設定して、ローテーション表示させるバナーを作成したいのですが、それぞれの画像に別のリンク先を設定する記述方法を教えて下さい。とりあえず、ローテーション表示させるために、下記のように記述してみました。 <html> <head> <title>画像切替とリンク先</title> <script language="JavaScript"> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <a href="#"><img src="01.gif" name="gazo" onLoad="setTimeout('anime()',12000)" border=0></a> </body> </html> まったく他の記述方法でもOKです。宜しくお願いします。
- ベストアンサー
- JavaScript
リンク画像のランダム表示について
はじめまして。諸先輩方、ご教授いただければと思います。現在、JavaScriptでのリンク画像のランダム表示を、コーティングしてます。配列に値をセットする方法は、存じてるのですが、対象のリンク画像が数十件あるため、全て記述するのはスマートではないと思い、とあるフォルダに対象のリンク画像を格納(1～50.jpg)し、取得したランダム値をもとに画像を表示させる所までは実装できました。その際に画像へリンクを貼る段階で詰まってしまいました。何か良い方法はないでしょうか？私の考えでは配列にリンク情報を格納し、取得したランダム値をもとに取得するのかなと思ってますが、取得後のリンク設定方法がわかりません。また、リンク画像を表示時、ロールオーバー処理も行いたく、外部ｊｓファイルにロールオーバー処理を記述しました。 IEでは、問題なく表示されてますが、他のブラウザではロールオーバーが出来ません。これは、リンク画像のランダム表示時にロールオーバー処理を追記する必要があるのでしょうか？
- 締切済み
- JavaScript
window.onLoad について
<body> タグに、onload=関数名・・・　と記述するとなぜかオブジェクトがありませんとかで実行されない時があるため、 <head>タグ内に <script type="text/javascript"> 　window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？と思い、 </body>の直前に <script type="text/javascript"> 関数名　　←　onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。この記述方法って正しいのでしょうか？環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているのでホントに困っています。アドバイスお願いします。 #何故　window.onLoad=function(){ 関数名 }　ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
複数画像のロールオーバー
ただいまホームページ作成中で、JavaScriptで画像のロールオーバー効果をしようと思っています。ところが、複数の画像を並べて効果を設定しようとしたところ、画像と画像の間に隙間があいてしまいます。対処法がありましたら、ぜひ教えてください！！
- ベストアンサー
- JavaScript
毎日違う画像を表示させるには
私はJavaScriptは初心者です。悩んでここに投稿させて頂きました。 JavaScriptで毎日（24時間ごとに）違う画像を表示させようと考えています。以下を実行したのですがIEだけ画像が表示されません。どなた様か、おかしいところ、また違うJavaScriptの記述でも構いません。教授いただけると幸いです。 <SCRIPT LANGUAGE=javascript>  </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P><img id=img></P> </BODY>
- ベストアンサー
- JavaScript
複数の画像をランダムに表示させるソースを教えて？
画像は50枚前後、画像といってもリンクバーで画像毎にそれぞれの違ったリンク先ＵＲＬも指定したく、（target="_blank"）なおかつ表示箇所はテーブル内のセル8箇所で、重複しないようにランダムに表示させたいです。と、ＸＨＴＭＬで書かれた既存ページで使うのでスクリプトは外部ファイル（ｊｓ）にして、ページコード上では<body onload="____"><img id="～>等で読み込ませたいです。※ＸＨＴＭＬではname属性は使えません。また私はjavascriptについて全くの素人ですので、画像数、ＵＲＬ、パス等を書き換えるだけで直ぐに使えるソースが欲しいです。どなたか教えて頂けると幸いに存じます。
- ベストアンサー
- JavaScript
複数画像の読み込みが完了したら、処理をすすめるには？
javascriptにおいて質問です。いま、imgタグが40個あり、その画像すべての読み込みが完了したときにメッセージを出したいです。調べてみると、document.images[i].completeなるものでその画像の読み込みが完了したらtrueを返すものがあるようですので、それを使って bodyのonLoadイベントにおいてimgタグ分まわしてすべて.completeがtrueになるまで次の処理にいかないようにしたいのですが、どうすればいいのでしょうか？画像の中には重いものもあって、forでまわしてもダメのようでした。再帰処理とか使うのだろうと思うのですがうまくいきません。すべての読み込みをチェックし、すべて読み込んだらメッセージを出すロジックを教えてください。
- 締切済み
- JavaScript

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