我有一个相当重的 HTML/jQuery 页面。时间轴显示平均加载时间为 1.5 秒，因此我决定显示预加载器。
我是这样实现的:
<body> 之后的 HTML :
<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');
});
“loaded”类允许我在页面加载完成后触发加载器的消失。
这里的问题是，在我的加载程序覆盖屏幕之前，我可以看到大约半秒的时间，网站的 html 框架开始构建。 我如何确保首先显示的是我的 loader div ？
(抱歉，我无法提供该元素的链接或jsfiddle)
更新:更具体地说，加载程序运行完美，但它不会首先启动。假设总加载时间为2s，加载器只会在最后1s加载。浏览器总是在显示加载器之前构建 DOM。
UPDATE2 :我尝试过使用没有动画的加载器，只是由覆盖整个屏幕的简单 div 和“正在加载”文本组成，我仍然遇到同样的问题，这是屏幕截图在加载程序出现之前我能看到的内容(“请注意，主体图片相当重，因为它是由 4 层不同颜色通过 z 索引设置堆叠而成”)
最佳答案
那么，这个问题的根本原因是什么？那就是 JavaScript 是单线程的。有一个主线程在持续运行，只是需要很长时间才能完成渲染。这可能会导致浏览器卡住并加载 div。
通过异步调用，JavaScript 可以模仿多线程并解决根本原因。主线程不断旋转，完成其工作，而异步任务可以在不影响性能的情况下，在主 JavaScript 线程的每次旋转/运行时无形地填充隐藏的 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
关于javascript - 预加载 div 不会在大部分 DOM 之前加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34415765/