メインページの準備中にページを表示する

Question

メインページの準備中とロード中にプレロードイメージを表示したい。メインページ全体をリロードする必要があるので、私はAjaxを使うことができないと思う。私は次に実装したい：最初に、私はプリロードページを要求し、サーバーが私にそれを送る。次に、サーバーはメインページを作成し始めます（約15-20秒かかります）。 第3に、サーバーが作業を終了すると、メインページが送られます。しかし、私はどのように3番目の部分を実装できますか？

2番目のアイデアは、メインページを2つの部分に分けています。そのうちの1つは、'busy time'の内容を除き、メインページ全体の内容を含むプリロードページです。そしてAjaxを使用して'busy time'の内容をロードします。

あなたはどう思いますか？

Answer 1

これを試してください。読み込みスピナー要素が必要です。また、$（function（）{}）; DOM（html構造体）がロードされるとアクティブになります。これは、訪問者が最初にページに到達したときに最も近いところです。 body要素は隠され、すべての画像とすべてが完全にレンダリングされ、CSSファイルとJavascriptファイルがロードされて動作するまで待ってから、スピナーからコンテンツにクロスフェードしてスピナーを削除します。

$(function(){ 
    $('body').hide(); 
    $('html').append('<div id="loading-spinner"></div>'); 
    $('body').load(function(){ 
     $('#loading-spinner').fadeOut('fast').remove(); 
     $(this).fadeIn('fast'); 
    }); 
}); 

あなたはロードスピナー要素の背景にGIFを適用し、それを中心にいくつかのCSSをする必要があります

：

#loading-spinner { 
    width:100px; 
    height:100px; 
    background:url(loading.gif); 
    left:50%; 
    margin-left:-50px; 
    top:50%; 
    margin-top:-50px; 
}