17

私は簡単なことをしようとしています - すべてのDIV、テキスト、および画像を含むページ全体を表示するのを待つjQueryスクリプトを作成します。ページの読み込み中に、ページの一部を表示する代わりに、回転する GIF 画像を表示したいと思います。ページ全体が読み込まれると、ブラウザ ウィンドウでページのコンテンツをフェードアウトできます。

ajax リクエストでコンテナー DIV にロードするスクリプトはたくさんありますが、これは異なります。これにより、HTML ページの読み込み中に回転する GIF が表示されます。どんな助けでも大歓迎です

このタイプのスクリプトは ajax リクエストでのみ機能します

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
4

4 に答える 4

42

$(document).ready(...)DOM がロードされるとすぐに起動します。これは早すぎます。使用する必要があります$(window).on('load', ...)：

JavaScript:

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

CSS:

#cover {
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}

HTML:

<div id="cover"></div>
<!-- rest of the page... -->

この jsFiddle を見てください: http://jsfiddle.net/gK9wH/9/

于 2012-05-24T17:54:47.357 に答える
3

ページ全体をオーバーレイで覆い、ページが読み込まれたらオーバーレイを削除します。必要に応じて、これを微調整して、loading.gif も表示することができます。次に例を示します。

HTML

​&lt;body>
<div id="container">
    <h2>Header</h2>
    <p>Page content goes here.</p>
    <br />
    <button id="remove_overlay">Remove Overlay</button>
</div>
​&lt;/body>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#container{padding:20px;}

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}

#overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:2305px !important; /*change to YOUR page height*/
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}

jQuery:

$(document).ready(function () { 

        // Set a variable that is set to the div containing the overlay (created on page load)
        var page_overlay = jQuery('<div id="overlay"> </div>');

        // Function to Add the overlay to the page
        function showOverlay(){
            page_overlay.appendTo(document.body);
        }
        // Function to Remove the overlay from the page
        function hideOverlay(){
            page_overlay.remove();
        }

        // Show the overlay.
        $(showOverlay);

       });
});

$(document).ready(function () { 
    $(hideOverlay);
});

ページが要求されるとすぐにオーバーレイが読み込まれるように、これを微調整する必要があります ($(showOverlay);ドキュメントの準備が整う前に呼び出されるように呼び出しを微調整します。

これは、オーバーレイを削除するためのボタンを備えた簡単な作業フィドルです。そこから行けるはずです :) http://jsfiddle.net/3quN5/ ​​</p>

于 2012-05-24T19:00:19.720 に答える
2

ロード中にページ全体をカバーする「カバー」divを作成するのが最善の方法だと思います。それは不透明で、GIF が含まれます。

ページが読み込まれると、次のように div が非表示になります。

$(document).ready(function() {
  // Hide the 'cover' div
});

次の例では、div がページのサイズになります。

.div{
  height:100%;
  width:100%;
  overflow:hidden;
}
于 2012-05-24T17:48:27.857 に答える
0

最初に body タグの間のすべてを意味しますか? ギフトを回転させる最善の方法は、GIF を繰り返しなしで中央に配置するように定義するクラスを追加することです。ページを表示する準備ができたら、クラスを削除します。

$('body').addClass('loading')
$('body').removeClass('loading')

何かを送信してから DOM を追加して gif を追加しようとすると、ページが送信されたために一部のブラウザーがそれを実行しないため、これは常に最良の手法です。

于 2012-05-24T17:53:39.897 に答える