启动画面显示2秒，然后按.fadeout

Question

I have a preloader splash page for my website that I would like to display upon load, and fade out after 2s, revealing the main website content below.

I have the below code, which work well to display the splash page upon window load, but I want to replace this with a simple 2s delay, so that it always appear, even for those on super fast connections. Currently it is fading out too quickly when on a fast connection.

Thanks.

HTML

<div class='preloader'>
    <div class="preloader-logo">Logo</div>
    <div class="preloader-loading-icon">Loading</div>
</div>

<main>Content goes here, should be hidden initially until fully loaded.</main>

CSS

.preloader {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(255,102,51,1);
}

.preloader-logo {
    background: url(images/ui-sprite.svg) no-repeat 0 -300px;
    position: absolute;
    width: 140px;
    height: 58px;
    top: 50%;
    left: 50%;
    text-indent: -9999px;
}

.preloader-loading-icon {
    background: url(images/preloader-loading.svg) no-repeat 50%;
    text-indent: -9999px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: 90px;
    width: 40px;
    height: 40px;
}

main { opacity: 0; } Hide main content to avoid flash before preloader initialises */

JS

/* Preloader Splash */
$(window).load(function(){
    $('#container').animate({opacity: 1},300);
    $('.preloader').fadeOut(500);
});

Answer 1

Use setTimeout

$(window).load(function(){
    setTimeout(function() {
        $('#container').animate({opacity: 1},300);
        $('.preloader').fadeOut(500);
    }, 2000);
});