Splash頁面顯示2s然後.fadeout

Question

我有一個預加載器啓動頁面，我想在加載時顯示，並在2s後淡出，顯示下面的主要網站內容。

我有下面的代碼，它很適合在窗口加載時顯示啓動頁面，但我想用一個簡單的2s延遲替換它，以便它始終顯示，即使對於超快速連接的代碼也是如此。目前快速連接時，速度太快了。

謝謝。

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

使用的setTimeout

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