画像表示の順序をコントロール

[上に] [前に] [次に]
杉山 [E-Mail] [HomePage] 1999/11/16(火) 08:45:45
あるページの複数の画像が表示される時は軽い画像から
表示されると読んだことがあるのですが、実際はそうでも
ないようです。
背景画像も含め、画像表示の順番を指定することは
できるのでしょうか。
早く表示させたいものをインターレースgifにしてみましたが
うまくいきませんでした。

ぎん 1999/11/16(火) 12:30:37
こんなのは、どうでしょうか?
最初に表示する画像を作って表示させといて、
すりかえます。

<html>
<body onload="start_img()">
<img src="hoge01.gif" name="img_01" border=0 >
<img src="hoge01.gif" name="img_02" border=0 >
<SCRIPT LANGUAGE="JavaScript">
function start_img(){
img_01.src = "hoge02.gif"  ;
img_02.src = "hoge03.gif"  ;
}
</SCRIPT>
</body>
</html>
うーん、もっとスマートな方法がありそうな(^^;)
気もします。
タイマーなどを使って、表示の時間差を設ける必要も、
あるかも知れません。

ぎん 1999/11/16(火) 12:38:24
ちなみに、上の例では、IE3だと動きません。
IE4、IE5はOKです。

Syn [E-Mail] 1999/11/16(火) 13:28:43
軽い画像から表示されるってことはありません。
HTML 文書を上から読んでいって、 img タグが見つかった順に
画像を取りにいって、読み終わったものから表示しているだけ
なので、軽い画像は早く読み終わって表示され、重い画像は
あとで表示されているように見えるだけです。
インタレース GIF やプログレッシブ JPEG なら途中経過が見え
るので心理的には早く表示されるように見えます。

JavaScript で、

1. HTML 文書内ではすべての画像を同一の軽いものにしておく
   img タグには name 属性を書いて順序をわかるようにして
   おく (以下 image1, image2 ... と書きます)
2. body タグの onLoad イベントで最初に表示したい画像を
   image1.src='〜' で置き換えて読ませる
3. 2. で表示する画像にも onLoad イベントを書いておき、
   次に表示したい画像を image2.src='〜' で置き換える
4. 3. で表示する画像にも onLoad イベントを書いておき、…
   以下最後の画像まで続く

アイデアだけで、うまくいくかどうかわかりません(^^;
画像を置き換えたあとの onLoad イベントは動くのかな?
だれか試してくださるとありがたいけど… (他力本願)

杉山 1999/11/16(火) 22:24:34
>HTML 文書を上から読んでいって、 img タグが見つかった順に
>画像を取りにいって、読み終わったものから表示しているだけ
あ、やっぱりそうなんだ。
と言うことは、HMTL文書の最初の方で画像を読み込ませるだけ
読み込ませて表示はさせないようにしとけばいいわけですね。
うーむ。
(↑腕組みしてるだけ。考えてるふりして次のレスに期待している。)

きたむら [HomePage] 1999/11/18(木) 03:09:20
みなさんの書かれた方法を参考にして、
>HMTL文書の最初の方で画像を読み込ませるだけ
>読み込ませて表示はさせないようにしとけばいいわけですね。
という方針のJavaScriptを書いてみました。

http://kitam.homepage.com/imgseq/imgs.html
(img0.jpg、img1.jpg、img2.jpg、の順番で右から左に
表示されるはず…)

IMGタグのSRCには最初ダミーの小さな画像ファイルを指定して
おきます。そして実際のファイル名をNAMEで指定しておきます。
<BODY onLoad="init();">を実行すると、NAMEで指定した
ファイル名をソートして、名前の順番に表示します。

イメージを読み終えたかどうかの判定は、
../199807/98070004.htm
を参考にさせてもらい、image.completeプロパティを使いました。

JavaScriptのバージョンの違いとか、まだよくわからないので、
NN4.0で動作確認しただけですが、けっこううまくいってる
のではないかと自画自賛中(^^)

1999/11/18(木) 03:22:00
動作確認です
Win98で、NN4.6、NN3.03で見ましたが、同時でした。
JavaScriptオフなんて言うこともないですが。
あとIE4に関しては真っ白でした。透明なのだけはあるようです
一応キャッシュ消したりもしましたが…
なぜでしょう?自分だけかな?

1999/11/18(木) 04:12:06
WIN95でnn4.6とie5で確認しましたがワさんと同じです。
nnは同時でieは透明のみ

杉山 1999/11/18(木) 08:57:26
みなさんありがとうございます。
きたむらさんの、私のIE4でも画像が出てきません。

私は本文の上の方に、早く表示させたい画像を
表示サイズ1x1にして入れてみました。
画面にゴミのようなものがついてしまいますが
許容範囲内かとも思います。

きたむら 1999/11/18(木) 12:01:53
すいません。あのJavaScriptはバグってました…。
杉山さんの問題は、もう解決のようなので、蛇足になって
しまいますけど、いちおう修正版をアップしときます。
http://kitam.homepage.com/imgseq/imgs2.html

ついでに、順番が見えるようにスロー表示のバージョンも。
http://kitam.homepage.com/imgseq/slowimgs.html

#こんどはIE5.0でも確認しました(最初からやっとけ)
#しかしまだ何かバグあるんだろうな(弱気)

杉山 1999/11/18(木) 23:25:19
[[解決]]
ぎんさん、きたむらさんのを保存して
色々研究させていただきます。
私のもの(画面にゴミのようなものがついてしまうもの)は
スマートな方法じゃないし。。。
   ありがとうございました。

[上に] [前に] [次に]