DOM載入過程中ready和load的區別

標籤：href   nbsp   lob   外掛程式   develop   finish   方法   let   int   

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

1、瀏覽器開始解析HTML文檔

2、 瀏覽器遇到HTML文檔中的<script>元素以及CSS樣式檔案，並且沒有async或defer屬性，就暫停解析，開始執行指令碼和CSS樣式

3、 HTML文檔解析完成

4、 瀏覽器等待圖片、樣式表、字型檔等外部資源載入完成

在這其中，有兩個階段：

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

load，表示頁麵包含圖片等外部檔案在內的所有元素都載入完成。

 

DOM Ready

嚴格來說，ready並不是DOM中的事件，只是因為在jQuery中，有ready()方法，它在頁面HTML文檔解析完成但圖片等媒體檔案載入完成之前執行。

使用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

DOM載入過程中ready和load的區別