DOM加載過程當中ready和load的區別

時間 2019-11-14

標籤 dom 加載過程當中 ready load 區別欄目 HTML 简体版

原文原文鏈接

在瀏覽器地址欄輸入URL地址，瀏覽器開始加載頁面時，有如下幾個過程javascript

一、瀏覽器開始解析HTML文檔html

二、瀏覽器遇到HTML文檔中的<script>元素以及CSS樣式文件，而且沒有async或defer屬性，就暫停解析，開始執行腳本和CSS樣式html5

三、 HTML文檔解析完成java

四、瀏覽器等待圖片、樣式表、字體文件等外部資源加載完成瀏覽器

在這其中，有兩個階段：dom

ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）；async

load，表示頁面包含圖片等外部文件在內的全部元素都加載完成。測試

DOM Ready字體

嚴格來講，ready並非DOM中的事件，只是由於在jQuery中，有ready()方法，它在頁面HTML文檔解析完成但圖片等媒體文件加載完成以前執行。spa

使用jQuery插件通常都這麼寫

$(function(){
          //do something
         alert('something  finished！')
});

其實這個就是jQuery ready()的簡寫，他等價於

$(document).ready(function(){
     //do something
     alert('something  finished！')
})

這個jQuery ready()的方法就是DOM Ready ，他的做用就是，在DOM加載完成後，圖片等外部文件加載以前，就能夠對DOM進行操做。

在不使用jQuery的狀況下，可使用DOMContentLoaded事件能夠判斷DOM的ready狀態。

document.addEventListener('DOMContentLoaded', function () {
          //do something
         alert('something  finished！')
});

它表示在document節點上監聽DOMContentLoaded事件，一旦document中的DOM完成加載就觸發此事件。

IE8不支持DOMContentLoaded事件，所以在較低版本的瀏覽器中，可使用 readystatechange事件，效果是同樣的。

document.onreadystatechange = function () {
  if (document.readyState == "interactive") { 
          //do something
         alert('something  finished！')
  }}

其中，document.readyState屬性返回當前文檔的狀態，共有三種可能的值。

- loading：加載HTML代碼階段（還沒有完成解析）

- interactive：加載外部資源階段時

- complete：加載完成時

Dom Load

DOM在徹底加載完成以後會觸發load事件，此時若是想作點事情的話，能夠這麼寫

window.onload=function(){
      //do something
      alert('something  finished！')
}

注意，不要寫成document.onload，由於在大多數瀏覽器中，在document上監聽load事件是無效的，應當在window上監聽。

使用jQuery的寫法

$(window).load(function(){
          //do something
         alert('something  finished！')
})

這就是Dom Load，他的做用就是，在DOM以及其中的圖片等其餘外部文件所有加載完畢以後觸發。

考慮一下下面的代碼在執行時，會先彈出哪一個窗口。

<script>
window.onload=function(){
      alert('load  finished！')
}
document.addEventListener('DOMContentLoaded',function(){
         alert('ready  finished！')
})
</script>
<body>
<h1>這是一個 JavaScript 測試程序</h1>
</body>

參考：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

https://www.w3.org/TR/html5/syntax.html#the-end

JavaScript標準參考教程http://javascript.ruanyifeng.com/dom/document.html