Question

我有一个非常沉重的HTML / jQuery页面。时间轴显示平均加载时间为1.5秒，因此我决定显示预加载器。

我这样实现：

HTML <body>之后：

<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

然后在我的js文件的开头：

$(document).ready(function() {
    $('body').addClass('loaded');
    $('h1').css('color','#74777b');
});

＆＃34;已加载＆＃34; class允许我在加载页面时触发加载器的消失。

这里的问题是，在我的装载机覆盖屏幕之前，我可以看到网站开始构建的html框架大约半秒钟。如何确保显示的第一件事是我的装载器div？

（抱歉，但我不能给出项目的链接或方式）

UPDATE ：更具体地说，加载程序运行正常，但它并不是首先启动的。让我们说总加载时间是2秒，加载器只会加载到最后1秒。浏览器总是在显示加载器之前构建DOM。

UPDATE2 ：我尝试过没有动画的加载器，只是简单的div覆盖了整个屏幕并且使用了＃34; Loading＆＃34;作为文本，我仍然有相同的问题，这里是一个屏幕截图，我可以看到加载器出现之前（＆＃39;请注意，身体图片是相当沉重的，因为它是由4层不同颜色堆叠通过z-index设置＆＃39;）

Answer 1

使用内联样式将预加载器放在文档顶部。它会更快地加载。

你应该把它放在你的header中，而不是直接内联，但这里是我不想依赖外部资源的例子。

例如

<div id="loader-wrapper" style="width: 100%; z-index: 99998;
position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%;
background-color: #fff;">
   <div id="loader"></div>
   <div class="loader-section section-left"></div>
   <div class="loader-section section-right"></div>
<div>

这将在页面呈现后立即隐藏所有内容。

默认情况下，您还可以在页面上隐藏其他所有内容，然后在关闭预加载器时显示它。

Answer 2

那么，此问题的根本原因是什么？是JavaScript是单线程的。有一个主线程正在连续运行，并且仅花费很长时间即可完成渲染。这可能会导致浏览器冻结并无法正常加载div。

通过异步调用，JavaScript可以模仿多线程并解决根本原因。主线程一直在旋转，继续工作，并且异步任务可以在不影响性能的情况下，通过每次主线程运行/旋转来无形地填充一个隐藏的div。异步任务完成后，可以调用回调函数以隐藏您的预加载器div，并使以前为空的div具有主要内容可见。

所以-一种解决方法是将预加载div本身放在一个简单的页面中。它会快速干净地加载。在其下面有一个空的div，该div将容纳大型的复杂内容，并由异步的ajax调用填充。然后，在简单页面的 DOMContentLoaded 事件上，进行ajax调用以放下页面的其余部分并将其加载到空div中。只需一行就可以为内置的DOMContentLoaded事件设置“全局”事件侦听器：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

如果您想给自己更多的时间，可以使用计时器（使用setTimeout（）或setInterval（）），并在ajax调用完成后再给自己几秒钟，以确保所有内容都已完全加载并准备好显示。参见https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

仅供参考，以下是有关JavaScript线程模型的讨论：https://medium.com/@francesco_rizzi/javascript-main-thread-dissected-43c85fce7e23

有关线程讨论，请参见此处：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Answer 3

您可以执行以下操作：

默认情况下，将style = display：none设置为包含页面HTML内容的div，将加载器保留为HTML。这将隐藏加载内容的内容。
使用jquery文档onload，显示加载器，并在加载器活动结束时，更改div的样式，以显示：inline或display：block

希望这有帮助

Answer 4

在body的顶部添加一个装载器div（让我们称之为.loader）
只要身体不是display:none，就.loader设置为身体的所有直接子女而不是.loaded。
当页面准备好后，脚本将添加.loaded课程，然后将显示所有孩子，并隐藏.loader。

代码：

＆＃13;

$(function() {
  // simulate the heavy page loading
  setTimeout(function() {
    $('body').addClass('loaded');
  }, 1500);
});

＆＃13;

body:not(.loaded) > *:not(.loader) {
  display:none;  
}

body.loaded .loader {
  display:none; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- put it at the top of the body tag -->
<div class="loader">Loading</div>
<div class="entire_content">
  Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum   
</div>

＆＃13;

预加载器div在大多数DOM之前都没有加载

4 个答案: