• ベストアンサー

ページの読み込みが完了してから表示させるには?

画像など全てのロードが完了してからページを表示させる方法はないでしょうか。 ロード中に「now loading」などと表示できたら最高です。

  • ijava
  • お礼率78% (26/33)
  • HTML
  • 回答数1
  • ありがとう数4

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

ロードが完了して発生するイベントにonloadがあります。 方針としては、最初「now loading」のみを表示し、に元々のページ全体を非表示にしておいてonloadイベントで表示させます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> window.onload = function() { document.getElementById('gg0').style.display = 'none'; document.getElementById('gg').style.display = 'block'; } </script> <style type="text/css"> #gg { display: none; } </style> </head> <body> <div id="gg0" style="text-align: center">now loading</div> <div id="gg"> 本体 <hr /> <img src='1.jpg' /> </div> </body> </html> ------------------------------------------------------------ 以下は、このサンプルページでも確認できるよう、ロードが完了後2秒してから表示をしています。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> window.onload = function() { setTimeout("show()",2000); } function show() { document.getElementById('gg0').style.display = 'none'; document.getElementById('gg').style.display = 'block'; } </script> <style type="text/css"> #gg { display: none; } </style> </head> <body> <div id="gg0" style="text-align: center">now loading</div> <div id="gg"> 本体 <hr /> <img src='1.jpg' /> </div> </body> </html>

ijava
質問者

お礼

完璧でした!ありがとうございました!

ijava
質問者

補足

すごい丁寧にありがとうございます! 早速試させていただきますね!

関連するQ&A

  • MAINページの読み込み完了まで、SUBページを表示しておくことは可能ですか?

    JAVASCRIPTの初心者です。次のような動きをするプログラムがJAVASCRIPTで組めますか? 教えてください。 〈現状〉ページAから、多数の画像を掲載するページBにリンクで飛ばしていますが、ページBのレイアウトが画像読み込み中、崩れ(TASBLEが膨れる)てしまいます。ページA、ページBは別HTMLです。 〈求める動き〉 (1)ページAから多数の画像を掲載するページBにリンクで飛ばす。 (2)ページBの読み込み中、ページBに代わるSUBページを表示する。 (3)ページBの読み込みが完了(レイアウトが安定)し次第、ページBを表示する。 こうした動きが可能なのか、不可能なのかも分かりません。どうぞよろしくお願いします。

  • 読み込み中に「Now Loading」を表示したい

    カテゴリが異なると思い、改めて質問致します。 PHPファイルの読み込み中に「Now Loading」を表示したいのですが、 (関連ページ http://oshiete1.goo.ne.jp/qa2753468.html) PHPファイルで作成されている色々なサイトを見てみましたが、表示されるまで「Now Loading」を表示しているページってないんですよね。(1ページぐらいあってもよさそうなものですが)ということは、PHPファイルの読み込み中に「Now Loading」を表示する事はやはり不可能なのでしょうか? どうかアドバイスの程よろしくお願い致します。

    • 締切済み
    • PHP
  • Now loadingの表示

    ページを読み込むときにNow loadingや読み込み中と表示させるにはどうすればいいんでしょう。 もしわかる人がいらっしゃったら教えてください よろしくお願いいたします。

  • IE8で読み込みが完了したウィンドウが強制的に表示されてしまう。   

    IE8で読み込みが完了したウィンドウが強制的に表示されてしまう。    Windows VistaでIE8を使っていると、いくつか使用か不具合なのかわからない現象が起きてしまいます。たとえば、あるページを読み込んでいる間に他のプログラム(ワードやテキスト等)を使用していると、ページの読み込みが終わった際にIEのウィンドウが強制的に表示され、いやがおうにもテキストやワードなどでの作業が中断されてしまいます。他にも画像を別ウィンドウで開いたりすると、画像の読み込みが終わるとその画像のウィンドウが強制的に表示される、お気に入りタブを開いていたのが強制的に閉じられてしまうなど、使っていてストレスがたまることが多いです。このIEのウィンドウの強制表示を防ぐ方法はないでしょうか?

  • ページを読み込み中であることをお知らせしたい

    テーブルや、大量の画像を使っおり、ページが非常に重くIEで表示すると、すぐにはページ全部が表示されません。 そして、15秒くらいすると、全部が表示されます。(当環境=ダイヤルアップ) そして、内部の画像が読み込まれているようです。 その間、Now Loadling...の文字を点滅もしくは、「.」を増加させながら、「このページは、重いけど、読み込んでいる」ということを確実に見ている方に伝えたいのですが、何か、良い方法は無いでしょうか? ちなみに、検索して見つけたものは、全ての画像を読み込んだとき、レイヤーを変更すると言うものでしたが、全ての画像を読み終えるのに、2,3分かかるので部分づつでも表示されたらとにかく表示したいので、もっと、良いものを探しています。 自分で作れればいいのですが、表示される文字を変更するくらいしかできないので・・・何卒、宜しくお願い致します。

  • ページ読込中に表示が崩れるのを直したい。

    ショッピングカートのASPを使っていて、javascriptをheadで読み込めません。 そのせいなのかわかりませんが、スライドショーのjqueryを使用すると、ページ読み込みの際に、 スライドショーの中の画像が崩れた形で表示されます。 数秒待てば通常の表示に戻るのですが、綺麗に表示させることはできないでしょうか? javascriptでページ成形された後に、画像が読み込まれればいいのですが。 何卒よろしくお願い致します。

  • 内部処理中にNow Loadingみたいな文字を表示させたい

    お世話になります。 PERLにて以下のことをしたいと思っているのですが、お知恵をお貸し頂けるでしょうか。 「内部処理中にNow Loadingみたいなページを表示させたいのですが、どうもうまくいかない。」 以下のような感じです。 =============================================== print "Content-type: text/html\n\n"; print << "EOF"; <html> <head>  ・  ・  ・ </head> <body>  ・  ・ (<body>~</body>の間にjsでNow Loadingを表示するよう設定) EOF &sub #←内部処理用サブルーチン #処理後html文を吐くもの print << "EOF"; </body> </html> EOF =============================================== こんな感じで書いて、jsを使ってNow Loadingを表示するようにしようと思ったのですが、これだと、&subが先に処理された上でNow Loadingと表示されてしまうようで、意味のないものになってしまいます。 そこでヘッダー部分(最初のヒアドキュメント)部分までを先に表示した上で&subが動くようにし、それが完了したら最後のフッター部分を表示するようにしたいのですが、どのような方法があるでしょうか? 非常に不明な文で申し訳ないのですが、アドバイス頂ければ幸いです。 よろしくお願い致します。

  • 大きな画像の読み込むまで「loding中」って表示したい。

    かなり大きな画像1枚をPOP UPで表示させようとしてます。 ただ、読み込んで表示されるまで当然時間がかかります。 そこでflashとかのNOW LOADINGのような表示をして、画像が読み込み 終わったらパッと表示されるってことをやりたいのですが。 いくつか本を読んで近いものはあったんですが、どうもしっくりこなくて。 お知恵をお願いします。

  • 読み込み完了時のイベントは?

    ページが読み込まれた時のイベントは「onLoad」ですが、読み込みが完了した時のイベントはあるのでしょうか? 何故知りたいかといいますと、画面表示後すぐにそのページでsubmitしたいのですが、読み込み中ですとオブジェクトが見つからずにエラーになってしまうからです。 良い方法がありましたら教えてください。

  • ページが完全に読み込まれるまでNowLoadingを表示したい

    フレームで分割したページがあり、このページでCSVやテキストデータの取込みを行っています。 取込むデータを一度画面表示しているのですが、取り込む件数が多いと時間がかかってしまうので、 処理中に「Now Loading...」などの言葉を表示させたいのですが何も表示されません。 header.asp(取り込むファイルを指定) footer.asp(取込みファイルを画面表示) ↓ここのページを参考にしたのですが、フレーム分割されているのでonloadが機能していない? http://www.openspc2.org/reibun/JS_TipsAndTricks/etc/010/index.html フレームで分割されたぺーじでも同じような処理をさせるにはどうしたらよいでしょうか? よろしくお願いします。

専門家に質問してみよう