dポイントプレゼントキャンペーン実施中！

javascriptでの画像の先読みについて（その２）

解決済

  • 質問者：miku0004
  • 質問日時：
  • 回答数：4件

その１からの続きです。。

以下が私の作ったソースです。

<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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： isobeman
  • 回答日時：

画像を全てレイヤー(<img id="img1" src="a.gif" style="position: absolute; top: -10000"> とか)にして、不要な時は画面外へぶっ飛ばしておいて、必要なときに、位置を指定して表示させるなんてどうでしょうか?



<script>
document.all["img1"].style.top = 100;
document.all["img1"].style.left = 100;
</script>

ちなみに未確認です。ごめんなさい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

これまたすごいアイデアですね（笑）。

なるほど～、最初に144個の上向き矢印、矢印の線、下向き矢印、空白全て書いとくわけですか…。
で、早速試してみましたところ…

できました！！

画像を読み込みに行かない分だけ動作はすごく速いです。
ただ、必要なくなった画像を欄外にぶっ飛ばす処理を毎回行うため、表示の前に若干「ため」が入っちゃう感じです。

いやあ、しかし強引なアイデア（失礼）。
ありがとうございました。目からうろこです。

通報する
お礼日時：2002/07/29 13:16

No.3

  • 回答者： isobeman
  • 回答日時：

ページの読み込みに時間がかかるということですか?


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">
　　.
　　.
　　.

実際に試していないので、まともに動くかどうかは?です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
お礼が遅くなりまして申し訳ございません。

アドバイスの通り試させていただきましたが、あまり動作には影響がないようです（ちゃんと動きましたよ！）。

「ページの読み込み」に時間がかかるわけではなく、ページ読み込み後にイメージのsrcを入れ替える部分が実行された時（マウスがクリックされた時）に、先読みをした（はずの）画像を毎回毎回144回読み込んでいるようで、とても時間がかかってしまう、ということです。

しかしそうであれば、最初のページ生成時にも同じだけ<img>タグを書き込んでいるはずなのにそんなに時間はかかってないのは逆に不思議ですね…。

結局、ブラウザのインターネットオプションの一時ファイルの設定を「ページを表示するごとに確認する」から「IEを起動する毎に確認する」に変更してとりあえず使ってます（そうすると画像を再度読み込みに行かないみたいなんです）。

解決には至っていないものの、皆様の斬新なアイデアには驚かされっぱなしです。
引き続きご回答＆アドバイスをよろしくお願いいたします！

通報する
お礼日時：2002/07/26 23:09

No.2

  • 回答者： peso
  • 回答日時：

これで表示が早くなるとは思えませんが、一応。




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; }



やってることはかなり反則っぽいです。。。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答、ありがとうございます。
お礼が遅くなり、申し訳ございませんでした。

試してみましたが、動作は早くなりませんでした。
どうしてもdocument.image[i].src=img[×].srcのところで画像を読み込むようです。

144個の<IMG>の記述ですが、私は直接HTMLで書いてます。
と言っても、正確に言うと、CGIを使って生成したページになります。

これは関係するのでしょうか？
理論的には関係ないとは思うんですが。

通報する
お礼日時：2002/07/26 22:27

No.1

  • 回答者： peso
  • 回答日時：

とりあえず、理由はわかりません。

ただ、自分なりに訂正してみました。（参考程度にしてください。）


<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>");
}

のようにするといいかもしれません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

主な訂正点としてあげていただいた部分は、もっともなので早速採用させていただきました。
＃やはりon_image、off_imageは必要ありませんでしたね…

で、アドバイス通りdocument.writeでの記述を試してみましたが、変化はありませんでした（「<SCRIPT> ～ </SCRIPT> よりも後に<IMG>を書く」は既にそうなっています）。

やはりブラウザの「戻る」「進む」ボタンを押したときの、画像がキャッシュされた状態をjavascriptで作ることは難しいのでしょうか？

通報する
お礼日時：2002/07/23 16:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

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

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報