- ベストアンサー
画像を読み込むまでの間
a.htmlにて複数を画像を読み込ませ、その間、画面（HTML）には［読み込み中］とのメッセージを表示／画像は非表示で読み込み。全ての画像を読み込ませた後に、［読み込み終了<a href="b.html">リンク</a>］のメッセージを表示させたいのですが、方法が解りません（JavaScriptだとは思うのですが…）。 サンプルが紹介されているサイト等を教えて頂けると助かります。宜しくお願い致します。
- その他（インターネット・Webサービス）
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
実効があるかどうかはともかくとして、 ＃２のソースで、 <div ID="HIDE" class="hiddenWhenLoad"> <span>読み込み終了<a href="b.html">リンク</a><br></span> <img src="blossom.gif"><br> <img src="buttercup.gif"><br> <img src="bubbles.gif"><br> </div> を <div ID="HIDE" class="hiddenWhenLoad"> <span>読み込み終了<a href="b.html">リンク </a><br></span> </div> <div style="display:none"> <img src="blossom.gif"><br> <img src="buttercup.gif"><br> <img src="bubbles.gif"><br> </div> にすれば、目的としては達すると思いますが…
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>読み込み画像を（a.htmlでは）表示しないようには出来ませんでしょうか？。 a.htmlで読み込んだ画像を、 b.htmlで表示する（？？）ってことですか？ ブラウザのキャッシュを期待すれば、同じアドレスの画像はキャッシュされるのでしょうが、 キャッシュされない設定になっているブラウザの場合、b.htmlで別に読み込みが起こる（当たり前ですが）ので、a.htmlでなんらかの操作をしたところで無意味ですが…
補足
そうです、画像をキャッシュで…と言う事です。画像を大量表示させるb.htmlの前に、テキストのみのa.htmlで一時的に足留めし（画像をキャッシュさせ）、b.htmlでストレスなく表示をさせたかったのです。 サイトデザインの都合でこの方法を取りたかったのです。画像を読み込ませるまで読み込み中メッセージを出し、読み込みが終了と同時にデザインされたページを表示させる方法でも良いかな、と思いましたが、どちらにせよ方法か解らなかったので…。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
こんな感じではどうでしょうか。 DIVで非表示→表示をしてますけど、styleのクラスを使っているので、別々のタグにクラス指定してもいいです。逆にclassNameが使えない場合は、クラス指定は止めて、単純にstyleでやればいいかと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <style> <!-- .hiddenWhenLoad { display:none; } .normal { display:block; } //--> </style> <script type="text/javascript"> <!-- function display(){ document.getElementById("HIDE").className="normal"; document.getElementById("LOADINGMES").className="hiddenWhenLoad"; } //--> </script> <title>読み込み中の処理サンプル</title> </head> <body onload="display()"> <span ID="LOADINGMES">［読み込み中］<br></span> <div ID="HIDE" class="hiddenWhenLoad"> <span>読み込み終了<a href="b.html">リンク</a><br></span> <img src="blossom.gif"><br> <img src="buttercup.gif"><br> <img src="bubbles.gif"><br> </div> </body> </html>
補足
回答ありがとうございます。 試してみた所、理想の表示に近くなったのですが……、読み込み画像を（a.htmlでは）表示しないようには出来ませんでしょうか？。width="1" height="0"で良いような気もするのですが…。
- himajin-net
- ベストアンサー率48% (101/210)
それはもしかしてFlashで作成されているのではないでしょうか？ もしJavaScript等であればそのサイトのソースをご覧になったほうが早いと思います。
補足
以前、JavaScriptのサンプル／配布サイトで見たような気がしたのですが、思い出せず困っています（Flashではありません）。ですので、配布・紹介サイトがありましたら、教えて下さい。 JavaScriptで ・画像を表示させるまでに別の（軽い）画像を表示させる ・画面に表示させずに見えない内に画像を読み込み 等のサンプルはみつかったのですが、HTMLの表示を切り替えるようなものを探しています。
お礼
試してみます。有り難うございました。