- ベストアンサー
javascriptでの画像の先読みについて（その２）
その１からの続きです。。 以下が私の作ったソースです。 <script language="JavaScript"> <!-- var flag=new Array(); var image=new Array(); var img=new Array(); // gif画像の先読み img[0]=new Image();img[0].src="透明gif"; img[1]=new Image();img[1].src="上向き矢印.gif"; img[2]=new Image();img[2].src="矢印の線.gif"; img[3]=new Image();img[3].src="下向き矢印.gif"; var on_mouse=144; for (i=0;i<144;i++) {flag[i] = 0;} function on_image(num){ on_image_no = num; //マウスの位置(0～143) } function off_image(num){ on_image_no = 144; //範囲外 } function mouse_click(){ flag[on_image_no]=(flag[on_image_no]==0); var image_no=0; for(i=0;i<144;i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no==0){ document.image[i].src=img[1].src; //上向き矢印 image_no=2; //次から矢印の線を表示 }else{ document.image[i].src=img[3].src; //下向き矢印 image_no=0; //次から透明なgifを表示 } }else{document.image[i].src=img[image_no].src;} } } //--> </script> ＃関係ないですけど、off_image()はいらないかも…。 以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。 よろしくお願いいたします。 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633
- miku0004
- お礼率91% (31/34)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- isobeman
- ベストアンサー率41% (17/41)
ページの読み込みに時間がかかるということですか? HTMLの部分を提示してもらえますか? これは予想ですが、HTML中に<img>タグを144個並べているという前提とします。 そして、それぞれに src="x.gif" というファイル名が指定されていませんか? この場合、全ての画像をほぼ同時に読み込もうとしてしまうため、先読みの効果は得られないと思います。 以下のようにして、1つ読み終わってから、以降の画像を読み込むようにしてみてはどうでしょうか。 <script> function OnImageLoaded(){ for(i=0; i<144; i++) document.images["img"+i].src = "x.gif"; } </script> <html> <img src="x.gif" onLoad="OnImageLoaded()" name="img0"> <img name="img1"> <img name="img2"> <img name="img3"> . . . 実際に試していないので、まともに動くかどうかは?です。
お礼
ご回答ありがとうございます。 お礼が遅くなりまして申し訳ございません。 アドバイスの通り試させていただきましたが、あまり動作には影響がないようです（ちゃんと動きましたよ！）。 「ページの読み込み」に時間がかかるわけではなく、ページ読み込み後にイメージのsrcを入れ替える部分が実行された時（マウスがクリックされた時）に、先読みをした（はずの）画像を毎回毎回144回読み込んでいるようで、とても時間がかかってしまう、ということです。 しかしそうであれば、最初のページ生成時にも同じだけ<img>タグを書き込んでいるはずなのにそんなに時間はかかってないのは逆に不思議ですね…。 結局、ブラウザのインターネットオプションの一時ファイルの設定を「ページを表示するごとに確認する」から「IEを起動する毎に確認する」に変更してとりあえず使ってます（そうすると画像を再度読み込みに行かないみたいなんです）。 解決には至っていないものの、皆様の斬新なアイデアには驚かされっぱなしです。 引き続きご回答＆アドバイスをよろしくお願いいたします！
- peso
- ベストアンサー率41% (40/97)
これで表示が早くなるとは思えませんが、一応。 img[0] = new Image(); img[0].src = "透明.gif"; img[1] = new Image(); img[1].src = "上向き矢印.gif"; img[2] = new Image(); img[2].src = "矢印の線.gif"; img[3] = new Image(); img[3].src = "下向き矢印.gif"; for (i = 0; i < 144; i++){ flag[i] = false; // 仮に src のない <IMG> を書き出し document.write("<IMG name='image' width='20' height='3' onClick='mouse_click(" + i + ");'><BR>"); } // 各 img の src に img[0].src を割り当て for (i = 0; i < 134; i++){ document.image[i].src = img[0].src; } やってることはかなり反則っぽいです。。。
お礼
ご回答、ありがとうございます。 お礼が遅くなり、申し訳ございませんでした。 試してみましたが、動作は早くなりませんでした。 どうしてもdocument.image[i].src=img[×].srcのところで画像を読み込むようです。 144個の<IMG>の記述ですが、私は直接HTMLで書いてます。 と言っても、正確に言うと、CGIを使って生成したページになります。 これは関係するのでしょうか？ 理論的には関係ないとは思うんですが。
- peso
- ベストアンサー率41% (40/97)
とりあえず、理由はわかりません。ただ、自分なりに訂正してみました。（参考程度にしてください。） <SCRIPT language="JavaScript"> <!-- var flag = new Array(); var img = new Array(); var i; // gif画像の先読み img[0] = new Image(); img[0].src = "透明.gif"; img[1] = new Image(); img[1].src = "上向き矢印.gif"; img[2] = new Image(); img[2].src = "矢印の線.gif"; img[3] = new Image(); img[3].src = "下向き矢印.gif"; for (i = 0; i < 144; i++){ flag[i] = false; } function mouse_click(on_image_no){ var image_no = 0; flag[on_image_no] = (flag[on_image_no] == false); for(i = 0; i < 144; i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no == 0){ document.image[i].src = img[1].src; //上向き矢印 image_no = 2; //次から矢印の線を表示 } else{ document.image[i].src = img[3].src; //下向き矢印 image_no = 0; //次から透明なgifを表示 } } else{ document.image[i].src = img[image_no].src; } } } //--> </SCRIPT> 主な訂正点 ・image 配列は使っていないため、不要と思われる。 ・on_image と off_image は使わなくても mouse_click に値を渡せばよいと思われる。 ・状態が２種類しかないもの（flag[n]）は true / false を使ったほうがわかりやすい。 もしかしたら、 img[0]=new Image();img[0].src="透明gif"; よりも前に <IMG src="透明.gif"> が多数ある場合は全部読み込むのかもしれないので、 <SCRIPT> ～ </SCRIPT> よりも後に <IMG> を書くようにするか、 img[0] = new Image(); img[0].src = "透明.gif"; img[1] = new Image(); img[1].src = "上向き矢印.gif"; img[2] = new Image(); img[2].src = "矢印の線.gif"; img[3] = new Image(); img[3].src = "下向き矢印.gif"; for (i = 0; i < 144; i++){ flag[i] = false; document.write("<IMG src='透明.gif' onClick='mouse_click(" + i + "'><BR>"); } のようにするといいかもしれません。
お礼
ご回答ありがとうございました。 主な訂正点としてあげていただいた部分は、もっともなので早速採用させていただきました。 ＃やはりon_image、off_imageは必要ありませんでしたね… で、アドバイス通りdocument.writeでの記述を試してみましたが、変化はありませんでした（「<SCRIPT> ～ </SCRIPT> よりも後に<IMG>を書く」は既にそうなっています）。 やはりブラウザの「戻る」「進む」ボタンを押したときの、画像がキャッシュされた状態をjavascriptで作ることは難しいのでしょうか？
お礼
ご回答ありがとうございます。 これまたすごいアイデアですね（笑）。 なるほど～、最初に144個の上向き矢印、矢印の線、下向き矢印、空白全て書いとくわけですか…。 で、早速試してみましたところ… できました！！ 画像を読み込みに行かない分だけ動作はすごく速いです。 ただ、必要なくなった画像を欄外にぶっ飛ばす処理を毎回行うため、表示の前に若干「ため」が入っちゃう感じです。 いやあ、しかし強引なアイデア（失礼）。 ありがとうございました。目からうろこです。