DOM在载入之前未显示

我遇到了一个问题，即当我的window.onload（或）触发时，我的DOM不显示。在我的实际项目中，我所调用的javascript函数收集了相当多的数据，所以我试图首先显示一个splash风格的屏幕。很简单...但它不像我期望的那样工作，我觉得我错过了一些东西。我看到过类似的问题，但其中大多数人都有一个'提醒'作为测试解决方案的一部分。任何破坏脚本运行的东西都允许DOM显示......所以这些“解决方案”并不能解决我的问题。如果我单步执行代码（IE或Chrome），那么一切正常。这是一个重现问题的示例。至少当我在Chrome中运行它时，直到第三秒才显示......然后警报弹出并显示加载div。在IE中，加载区不会显示，直到所有5秒钟过去并且功能完成。在此先感谢您的任何想法！DOM在载入之前未显示

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
     #Loading{ 
      position: absolute; 
      Left: 50px; 
      Top: 50px; 
      width: 100%; 
      height: 100%; 
      background-color: yellow; 
      display: block; 
     } 
    </style> 
    <script> 
     window.onload = Hmm; 
     function Hmm(){ 
      i = 0; 
      while (i < 5){ 
       sleep(1000); 
       i++; 
       if (i == 3) { 
        alert("hi"); 
       } 
      } 
     } 
     function sleep(milliseconds) { 
      var start = new Date().getTime(); 
      for (var i = 0; i < 1e7; i++) { 
      if ((new Date().getTime() - start) > milliseconds){ 
       break; 
      } 
      } 
     } 
    </script> 
</head> 

<body> 
    <div id="Loading">Loading...</div> 
</body> 
</html>

来源

2015-10-14 Thunder

看看[这篇文章]（http://stackoverflow.com/questions/588040/window-onload-vs-document-onload） –

感谢您的MX D快速笔记。我已经读了很多像这样，但它似乎没有帮助。我已经尝试window.onload和document.onload和body onload ....以及jQuery的方法...没有真正看到我的结果有任何不同。 – Thunder

您不应该使用while循环来使页面锁定。 – epascarello

我强烈建议您阅读Events and Timing In-Depth，现在。我将假设您的实际项目代码“收集相当多的数据”是而不是异步写入，很像您的测试代码。

这里是知识从链接的文章的几个掘金：

大多数浏览器使用[A]的UI和JavaScript，这是阻止同步调用单个线程。所以，JavaScript执行会阻止呈现。

事件异步处理，但DOM事件除外。

最后，不同浏览器的渲染管线是不一样的。你的结果会有所不同。

来源

2015-10-14 20:31:16 Brett

Brett，谢谢。我正在做一个同步和异步的混合...我会在阅读和研究这篇文章时记住这一点。 – Thunder

DOM在载入之前未显示

回答

相关问题