web-dev-qa-db-ja.com

ロード完了後にHTMLページを表示

ページのすべてのコンテンツ（イメージ、スクリプト、CSSなど）が完全に読み込まれた後にのみブラウザにページを表示させる方法はありますか？

javascripthtmlbrowser
31
Rana

最も簡単なことは、次のCSSを含むdivを本文に入れることです。

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

（ご了承ください position: fixed IE6では動作しません-そのブラウザでこれを行う確実な方法はありません）

そのようにDIVを追加します（開始bodyタグの直後）：

<div style="display: none" id="hideAll">&nbsp;</div>

dIVを直後に表示します：

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script>

それを非表示onload：

 window.onload = function() 
  { document.getElementById("hideAll").style.display = "none"; }

またはjQueryを使用して

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

このアプローチには、JavaScriptをオフにしているクライアントでも機能するという利点があります。それはshould n'tちらつきやその他の副作用を引き起こしますが、テストしていないので、世の中のすべてのブラウザで完全に保証することはできません。

47
Pekka 웃

ページにオーバーレイを配置します

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

window.onloadハンドラーでその要素を削除するか、非表示にします

window.onload=function() {
    document.getElementById('loading-mask').style.display='none';
}

もちろん、ライブラリを使用している場合は、javascriptライブラリ（jquery、prototype ..）固有のonloadハンドラを使用する必要があります。

7
aularon

最初に本文を非表示にし、ロード後にjQueryで表示します。

_body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready
_

また、最後のメインの.jsファイルの最後の行に$('body').show();を含めることをお勧めします。

5
BlekStena

また、このために行くことができます。..これは、javascriptが読み込まれた後にHTMLセクションのみを表示します。

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>
3
JGilmartin

このためにJavaScriptを使用してみてください！これを行うための最良かつ最も簡単な方法のようです。 HTMLページが完全にロードされた後にのみ、組み込みのfuncnを使用してhtmlコードを実行します。

または、ブラウザの特定の状態でイベントが発生する状態ベースのプログラミングを使用することもできます。

0
Noddy Cha