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在載入之前未顯示

回答

相關問題