如何在页面加载后立即显示加载程序

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在用户导航到您网站上的其他页面或导航到您的网站之外时再次显示它。