通过 jQuery 使用淡出 div 作为启动画面？

Question

Script that displays a div on page load that fades out using jQuery to mimic a splash screen?

Answer 1

That is very simple! You can use the jQuery fadeOut() : Here is the code:

CSS

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

The above CSS will make the splashscreen fill up the whole page and be above everything.

jQuery JS

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

What that will do is, when it detects that the page has loaded, it will slowly fade away the splashscreen div.

HTML

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

That is all you need to create a splashscreen. Unfortunately, this can't be simulated in JSFiddle.

Answer 2

You can time your load by calling functions after certain parts of your script are loaded:

$(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();    

});

Once something is loaded or a script is run, you call your functions and they each attempt to call loadReady(). Only the last attempt will be successful at fading out your div. Put one call at the end of your script, and if the loadcontainer fadesOut before something else is loaded, then add another function at the end of the item that hasn't loaded yet.

I'm not going to get in to the css and html of the loading div because it is outside the scope of your question.

Your question is very vague. In future, give a few more details so we have a better understanding of what you are working with.