如何在網站內容加載時顯示加載html頁面？

Question

我正在一個包含大量MP3和圖像的網站上工作，這顯然有一些加載時間。我想在加載所有內容時顯示加載頁面。

我不知道如何實現這一點，但我有我想要使用的動畫gif。

有什麼建議嗎？

Answer 1

您需要添加JS

<script type="text/javascript"> 
    $(window).on('load', function() { 
     var $preloader = $('#page-preloader'), 
     $spinner = $preloader.find('.spinner');  

     $spinner.fadeOut(); 
     $preloader.delay(350).fadeOut('slow'); 
    }); 
</script> 

HTML：

<div id="page-preloader"> 
    <span class="spinner"></span> 
</div> 

CSS：

tbody tr td{ 
    max-width: 300px; 
} 
h1 { 
    text-transform: uppercase; 
    text-align: center; 
} 
.container>a:hover { 
    text-decoration: none; 
} 
#page-preloader { 
    position: fixed; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background: #fff; 
    z-index: 100500; 
} 
#page-preloader .spinner { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: url('YOUR-IMAGE-NAME.gif') no-repeat 50% 50%; 
    margin: -16px 0 0 -16px; 
} 

不要忘了一個jQuery添加到項目！

Answer 2

因此，基本上你可以製作一個寬度和視口高度都爲100％的預加載器，並在其上設置背景顏色和GIF。以下JS所做的是等到所有內容都加載完畢，然後preloader淡出。

$(window).load(function(){ 
    $('#preloader').fadeOut('300', function(){ 
    $(this).remove(); 
    }); 
});