如何在頁面加載後立即顯示加載程序

Question

我們都使用gmail或hotmail。當我們輸入它時，首先顯示一個加載器，然後一旦頁面準備就緒，加載器被隱藏。它是如何實現的？

我知道，只要頁面準備就緒，我可以通過jquery像這樣隱藏加載器。

$(document).ready(function() 
{ 
    $("#loader").toggle(); 
}); 

<div id="loader"></div> 
<style> 
.loader { 
border: 16px solid #f3f3f3; /* Light grey */ 
border-top: 16px solid #3498db; /* Blue */ 
border-radius: 50%; 
width: 120px; 
height: 120px; 
animation: spin 2s linear infinite; 
} 

@keyframes spin { 
0% { transform: rotate(0deg); } 
100% { transform: rotate(360deg); } 
} 
</style> 

<div>Main Content website</div> 

該div高於所有div的正文。 但是，如何在頁面準備好之前顯示加載div？

Answer 1

您可以通過JavaScript來完成。看看w3schools如何做到這一點非常簡單。易peasy檸檬squeezy

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5

Answer 2

如果您需要整個頁面加載（包括圖像，文本...），您應該使用$(window).load而不是$(document).ready，因爲$(document).ready在DOM加載後立即被觸發。

$(window).load(function(){ 
    $("#loader").toggle(); 
    $("#mainContent").show(); // Page content 
}); 

Answer 3

安德烈斯打我給它，但這裏是另一個例子：

$("#main-content").hide(); 
    $(window).load(function() { 
     $("#loader").fadeOut(1000, function() { 
      $("#main-content").fadeIn(1000); 
     }); 
    }); 

Answer 4

最初設定的loader只要頁面是在HTML/CSS顯示，讓你可以看到它訪問完畢，然後您可以使用$(window).load在頁面完全加載時隱藏它。

此外，您可以使用window.onbeforeunload在用戶導航到您網站上的其他頁面或導航到您的網站之外時再次顯示它。