如何在页面加载后立即显示加载器答案

【问题标题】：How to show loader at soon as page is loaded如何在页面加载后立即显示加载器
【发布时间】：2016-12-27 18:28:57
【问题描述】：

我们都使用过 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首先是body中的div。但是如何在页面准备好之前显示正在加载的 div？

【问题讨论】：

将其放入 HTML 并使用 CSS 设置样式
css 样式选择器与元素不匹配

标签： jquery

【解决方案1】：

您可以通过 JavaScript 来实现。看看 w3schools 是如何非常简单地做到这一点的。易榨柠檬汁

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

【讨论】：

【解决方案2】：

如果您需要加载整个页面（包括图像、文本...），您应该使用 $(window).load 而不是 $(document).ready，因为在加载 DOM 时会立即触发 $(document).ready。

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

【讨论】：

【解决方案3】：

Andrés 打败了我，但这是另一个例子：

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

【讨论】：

【解决方案4】：

初始设置loader在你的HTML/CSS中显示，这样你一访问页面就可以看到它，然后你可以在页面完全加载时使用$(window).load隐藏它。

此外，当用户导航到您网站上的另一个页面或导航出您的网站时，您可以使用window.onbeforeunload 再次显示它。

【讨论】：