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

如果您需要加载整个页面（包括图片，文字......），您应该使用$(window).load而不是$(document).ready，因为加载DOM后会立即触发$(document).ready。< / p>

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

Answer 2

您可以通过JavaScript完成。看看w3schools如何做到这一点非常简单。易腻的柠檬挤压

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

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再次显示该网页。

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

4 个答案: