0

スプラッシュ スクリーンを模倣するために jQuery を使用してフェードアウトするページの読み込み時に div を表示するスクリプトはありますか?

4

2 に答える 2

0

それはとても簡単です！jQuery を使用できますfadeOut()。コードは次のとおりです。

CSS

#splashscreen {
    height: 100%;
    width: 100%;
    z-index: 99;
}

上記の CSS は、スプラッシュスクリーンをページ全体に表示し、すべての上に表示します。

jQueryJS

$(window).load(function() {
    $('#splashscreen').fadeOut('slow');
});

これにより、ページが読み込まれたことが検出されると、スプラッシュスクリーン div がゆっくりと消えていきます。

HTML

<div id="splashscreen">
    Put your splashscreen content here. It can be anything!
</div>

スプラッシュスクリーンを作成するために必要なのはこれだけです。残念ながら、これは JSFiddle ではシミュレートできません。

于 2013-02-23T23:19:22.273 に答える
-1

スクリプトの特定の部分がロードされた後に関数を呼び出すことにより、ロードの時間を計ることができます。

$(document).ready(function() {
    var oneLoaded;
    function partOneLoaded() {
        oneLoaded = 1;
        loadReady();
    }
    var twoLoaded;  
    $('div').load('../inc/salesstatus.php, function() {
        twoLoaded = 1;
        loadReady();
    });      
    function loadReady(){
        if (oneLoaded == 1 && twoLoaded == 1)
            $('#loadcontainer').fadeOut('slow');
    }

/* ****rest of your script here  ****** */

// ie) at the end of your scripts: 

partOneLoaded();    

});

何かがロードされるか、スクリプトが実行されると、関数を呼び出し、それぞれがloadReady（）を呼び出そうとします。最後の試みだけがあなたのdivをフェードアウトすることに成功します。スクリプトの最後に1つの呼び出しを置き、他の何かがロードされる前にloadcontainerがfadeOutする場合は、まだロードされていないアイテムの最後に別の関数を追加します。

読み込み中のdivのcssとhtmlは質問の範囲外であるため、ここでは説明しません。

あなたの質問は非常に曖昧です。将来的には、あなたが何を扱っているのかをよりよく理解できるように、もう少し詳しく説明してください。

于 2012-04-07T04:46:18.847 に答える