load和DOMContenLoaded的區別

  load和DOMContentLoaded的作用就是當頁面加載完成的時候自動執行，但他們執行的時間點是不一樣的。

 

  DOM文檔加載步驟：

   （1）解析html結構

   （2）加載外部腳本和樣式表文件

   （3）解析並執行腳本代碼

   （4）構造HTML DOM模型   //DOMContentLoaded執行點

   （5）加載圖片等外部文件

   （6）頁面加載完畢  //load

 

從上面這個流程，我們就能很清晰的看到load和DOMContentLoaded的不同，load是在第六步完成之后執行，而DOMContentLoaded是在第四步完成之后執行。很明顯DOMContentLoaded的執行是在load之前的，下面是一個實例：

  window.addEventListener("load", function () {   //添加load事件
       console.log("load執行");
   }, false);

   window.addEventListener("DOMContentLoaded", function () {  //添加DOMContentLoaded事件
       console.log("domContentLoad執行");
   }, false)

結果：DOMContentLoaded先執行，而load后執行

 

 jQuery有3種針對文檔加載的方法：

 

$(document).ready(function() {
    // ......
})

//document ready 簡寫
$(function() {
    // .....
})

$(document).load(function() {
    // ......
})

 

load是在第六步完成之后執行，而ready是在第四步完成之后執行

總結：DOMContentLoaded比load更符合用戶體驗，因為load還要等其他外部資源（圖片之類的）加載完才能執行，而這些資源並不會影響到dom結構，所以我們大部分情況下都可以在dom加載第四步就執行我們的JavaScrip代碼，也就是使用DOMContentLoaded。

 

ps： 低版本的ie可以使用onreadystatechange事件，當document.readyState == "complete"時執行對應的代碼，這個事件不太可靠，比如當頁面中存在圖片的時候，可能反而在 onload 事件之后才能觸發，換言之，它只能正確地執行於頁面不包含二進制資源或非常少或者被緩存時作為一個備選吧。

document.attachEvent("onreadystatechange", doSomething)  //當頁面加載狀態改變的時候執行這個方法. 

function doSomething() 
{ 
if(document.readyState == "complete"){ //當頁面加載狀態為完全結束時進入 
//你要做的操作。 
} 
}