Preloader div在大多数DOM之前都没有加载 [英] Preloader div doesn't load before most of the DOM
问题描述
我有一个非常沉重的HTML / jQuery页面。时间轴显示平均加载时间为1.5秒，因此我决定显示预加载器。
I have a pretty heavy HTML/jQuery page. Timeline shows an average loading time of 1.5s, so I have decided to show a preloader.
我这样实现：
HTML恰好在< body> 之后：
HTML just after the <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文件的开头：
And then at the begining of my js file:
$(document).ready(function() {
$('body').addClass('loaded');
$('h1').css('color','#74777b');
});
加载类允许我在页面加载完成时触发加载器的消失。
The "loaded" class allows me to trigger the disappearing of the loader as loading of the page is done.
这里的问题是，在我的装载机覆盖屏幕之前，我可以看到网站开始构建的html框架大约半秒钟。
如何确保显示的第一件事物是我的装载机div？
The problem here is that before my loader covers the screen, I can see for approx half a second the html frame of the website starting to build. How can I make sure that the first thing displayed will be my loader div ?
（对不起，我不能给项目的链接或者jsfiddle）
(sorry but I can't give link or jsfiddle of the project)
UPDATE ：更具体地说，加载程序运行正常，但它不会先启动。假设总加载时间是2s，加载器只会加载到最后1s。浏览器总是在显示加载器之前构建DOM。
UPDATE : To be more specific, the loader works perfectly, but it doesn't start first. Let's say that the total loading time is 2s, the loader will only load on the last 1s. The browser is always building the DOM before displaying the loader.
UPDATE2 ：我尝试过没有动画的加载器，只是简单的div覆盖整个屏幕，并以正在加载作为文本，我仍然有相同的问题，这里是一个屏幕截图，我可以看到装载机出现之前（'请注意，身体图片很重，因为它由4组成通过z-index设置堆叠的不同颜色的图层'）
UPDATE2 : I have tried with a loader without animation, just made of simple div covering the whole screen and with "Loading" as text and I still have the same issue, here is a screen capture of what I can see before the loader appears('please note that the body pic is quite heavy as it is made of 4 layers of different colors stacked through a z-index setting')
推荐答案
那么，这个问题的根本原因是什么？那就是JavaScript是单线程的。有一个主线程在不断运行，只需要很长时间就可以完成渲染。这可能导致浏览器冻结并轻松加载div。
So, what is the root cause of this issue? That's that JavaScript is single-threaded. There's a main thread that's continuously running, and it is simply taking a long time to complete the rendering. This can cause freezing of the browser and squirrelly loading divs.
通过异步调用，JavaScript可以模仿多线程并解决根本原因。主线程保持旋转，完成其工作，并且异步任务可以在没有性能损失的情况下，无形地填充隐藏的div，每次旋转/运行主JavaScript线程。一旦异步任务完成，就可以调用一个回调函数来隐藏你的preloader div并使以前的空div与主内容一起显示。
With asynchronous calls, JavaScript can mimic multithreading and address the root cause. The main thread keeps spinning, doing its work, and the asynchronous task can, on the side, with no performance hit, invisibly populate a hidden div, with each spin/run of the main JavaScript thread. Once the asynchronous task completes, a callback function can be called to hide your preloader div and make the formerly empty div with the main content, visible.
所以 - 这个的一种方法是在一个简单的页面中自己预加载div。它将立即加载快速和干净。在它下面有一个空div，它将保存由ajax调用填充的大而复杂的内容，这是异步的。 然后，在简单页面的 DOMContentLoaded 事件中，进行ajax调用以关闭页面的其余部分并将其加载到空div中。需要一行为内置DOMContentLoaded事件设置全局事件侦听器： https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
So - one approach to this would be to have the preloading div by itself in a simple page. It will load fast and clean and immediately. Have an empty div below it, which will hold the big, complex content, populated by an ajax call, which is asynchronous. Then, on the DOMContentLoaded event of the simple page, make an ajax call to bring down the rest of the page and load that in the empty div. Takes one line to set a "global" event listener for the built-in DOMContentLoaded event: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
如果你想自己买更多时间，您可以获得一个计时器（使用setTimeout（）或setInterval（））并在ajax调用完成后再给自己几秒钟，以确保所有内容都已完全加载并准备好显示。请参阅 https://developer.mozilla.org/en-US / docs / Web / API / WindowOrWorkerGlobalScope / setTimeout
If you want to buy yourself even more time, you could get a timer (with setTimeout() or setInterval()) and give yourself a few more seconds after the ajax call completes, to guarantee everything is completely loaded and ready to display. See https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
仅供参考，这里讨论JavaScript的线程模型： https://medium.com/@francesco_rizzi/javascript-main-thread-dissected-43c85fce7e23
FYI, here's a discussion on JavaScript's threading model: https://medium.com/@francesco_rizzi/javascript-main-thread-dissected-43c85fce7e23
另见此处的讨论： https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
这篇关于Preloader div在大多数DOM之前都没有加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
