HTML5で表示する前に内容を読み込む

私はインターネットで雑誌を開発しています。コンテンツを実際に表示する前に、すべてのコンテンツ（画像、動画、DOM）を準備状態に読み込むことができるかどうかを知りたいと思います。読み込み中は、コンテンツの読み込みの進行状況が進行状況バーに表示されます。どうもありがとうございました！HTML5で表示する前に内容を読み込む

<body> 
    <div id="allcontent" style="display:none;"> 
      <!-- your entire page --> 
    </div> 
    <div id="progressbar">...</div> 
</body>

そして

$(window).load(function() { 
    $('#progressbar').remove(); 
    $('#allcontent').show(); 
});

EDIT：あなたは$('img')の数をカウントし、各時に既にロードされた画像の比率を計算することにより、進捗状況をシミュレートすることができ

出典

2012-01-23 AJ Naidas

のような何かを持っています$('img').loadイベント。完璧ではありませんが、何もありません。

出典

2012-01-23 10:35:44 ori

これはjavascriptが利用できないときにコンテンツにアクセスできないようにします – fcalderan

HTMLではなく '$（document）.ready'で非表示にします。（それはちらつきますか？） – ori

そして、それはまさに@AJ Naidasが望んでいたことです。 –

<html>要素に適用される特定のクラスを使用して、定型的なソリューションを提案します。私の例のバイオリンを参照してください。http://jsfiddle.net/tKtYd/

アイデアはheadですぐにJavaScriptでクラスwaitpageloadbeforedisplayを適用し、メインサイトのラッパーを隠すためにCSSでこのクラスを使用することです。その後、ウィンドウloadイベントを待ってそのクラスを削除し、サイトのコンテンツを表示します。このようにして、たとえjavascriptが使用可能/使用不可になっていなくても、コンテンツにはまだアクセスできます。

ローダーは、CSSのルール.waitpageloadbeforedisplay bodyを使用してボディー背景として表示されます（スタイリング目的でマークアップを使用する必要はありません）。

出典

2012-01-23 10:45:47 fcalderan

HTML5で表示する前に内容を読み込む

答えて

関連する問題