web-dev-qa-db-ja.com

すべてがロードされるまでページを非表示にする

JQueryを多用するWebページがあります。

私の目標は、すべての準備が整ったときにのみページを表示することです。

それにより、ユーザーに迷惑なページレンダリングを表示しないようにします。

私はこれを試しました（_#body_holder_はbodyの中のラッパーです）：

_$(function(){
    $('#body_holder').hide();
});
$(window).load(function() {
    $("#body_holder").show();
});
_

これは完全に正常に機能しますが、レイアウトを台無しにします。

問題は、ラッパーを非表示にすると、使用する他のjQuery関数とプラグイン（レイアウトプラグインなど）が妨げられることです。

したがって、これを行うには別のトリックが必要だと思います。 window.loadが発生するまで、体に画像またはdivを配置することはできますか？

どのようなアプローチを使用していますか？

編集：

解決策は、おそらく_display:none_またはhide();とは別の方法でなければなりません。

javascriptjquerydocument-ready
33
Email

JQueryで行われた処理はすべて、document.readyを待つ必要がありますが、これは遅すぎます。

次のように、divを上に配置します。

<div id="cover"></div>

いくつかのスタイルを設定します。

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

すべての要素がロードされたら、JSで非表示にします。

$(window).on('load', function() {
   $("#cover").hide();
});

または、何らかの理由でスクリプトがロードにDOM要素よりも長い時間を使用する場合、最も遅いロードを行う関数のタイプをチェックする間隔を設定し、すべての関数が定義されたらカバーを取り外します！

$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

//stackoverflow does not fire the window onload properly, substituted with fake load

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>simple</li>
    <li>test</li>
    <li>of</li>
    <li>a</li>
    <li>cover</li>
</ul>

<div id="cover">LOADING</div>
46
adeneo

探している人のためのjQueryソリューションを次に示します。

Cssで本文を非表示にし、ページのロード後に表示します。

CSS：

html { visibility:hidden; }

JavaScript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

ページが空白になると、ページが読み込まれたときにすべてのコンテンツが表示され、コンテンツがフラッシュされず、画像が読み込まれなくなります。

28
hawkeye126

Display：noneではなく、visibilityをhiddenに設定してみてください。可視性を非表示に設定すると、すべての要素の位置と寸法が保持されるため、レイアウトの問題は発生しません。

25
Igor Jerosimić

あなたの質問は有効ですが、物事がスピンアップしている間、ページを隠したり隠したりすることはできません。

ユーザーがページで何が起こっているのか理解できないようにします。多くのものをロードする必要があるかもしれませんが、ページのさまざまな部分がロードされると活気づくはずです。準備ができていないコントロールをロックする練習をする必要があります。おそらく、スピナーまたはその他の進行状況インジケーターを表示します。または、アイテムの読み込み時にcursorをwaitに設定します。

これにより、ユーザーはループ内に保持され、すべての準備が整うまですべてのパーツを覆い隠すのではなく、パーツがオンラインになったときにパーツを確認して対話することができます。

通常、ユーザーが最も速くアクセスする必要があるもの、通常はスクロールせずに見えるものを最初にロードします。ロードは、Promiseと簡単に調整できる優先順位付けです。

少なくとも、このページを見ると、ユーザーは方位を取得して、何をすべきかを決定できます。透明になります。

2
Mario

以下を使用してHTMLを開始します。

<body style="opacity:0;">

スクリプトの最後に：

document.body.style.opacity = 1;

1
José María Sánchez Ruiz

JavaScript以外のソリューションを探していたので、ほとんどのブラウザーで問題なく動作するものが見つかりました。

CSSルールの読み込み順序が重要なので、

  • 最初のCSSファイルで非表示クラスを定義するか、先頭にインラインを定義します。
.hidden-onpage-load{ display: none; }
  • 本体では、クラスは次のように使用できます
<div class="hidden-onpage-load"> ... </div>
  • 他のすべてのCSSおよびJSファイルが読み込まれた後、インラインまたはCSSファイルで再定義します
.hidden-onpage-load{ display: block; }
1
Sami Altundag

私が思いついた最も簡単な解決策は、以前に提案したようにボディをラップすることですが、get goから非表示に設定し、JQuery（またはjavascript）を使用してすべてのコンポーネントがロードされた後にロード時に再表示します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bodyDiv" hidden>

Hello World!

</div>
<script>
$(document).ready(function() {

  // add JQuery widget loads here
  
  $("#bodyDiv").show(); // reveal complete page
})
</script>
0
will