0

メインページの準備と読み込み中にプリロード画像を表示したい。メインページ全体をリロードする必要があるため、Ajaxを使用できないと思います。次に実装したい：最初に、プリロードページを要求すると、サーバーから送信されます。次に、サーバーがメインページの形成を開始します（約15〜20秒かかります）。第三に、サーバーが作業を終了すると、メインページが送信されます。しかし、どうすれば3番目の部分を実装できますか？

2番目のアイデアは、メインページを2つの部分に分けることです。そのうちの1つは、メインページのコンテンツ全体をコンテンツなしで含むプリロードページ'busy time'です。次に、Ajaxを使用して'busy time'コンテンツをロードします。

同僚、どう思いますか？

4

1 に答える 1

0

これを試して。スピナーエレメントをロードする必要があります。また、$（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;
}
于 2012-04-28T00:52:08.010 に答える