- ベストアンサー
ページの読み込みが完了してから表示させるには？
画像など全てのロードが完了してからページを表示させる方法はないでしょうか。 ロード中に「now loading」などと表示できたら最高です。
- みんなの回答 （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> ------------------------------------------------------------ 以下は、このサンプルページでも確認できるよう、ロードが完了後２秒してから表示をしています。 ------------------------------------------------------------ <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>
お礼
完璧でした！ありがとうございました！
補足
すごい丁寧にありがとうございます！ 早速試させていただきますね！