頁面載入時觸發的事件及順序

前言

　　頁面載入時，大致可以分成以下幾個步驟：

1. 　　開始解析HTML文件結構

2. #　　加載外部樣式表及JavaScript腳本

3. 　　解析執行JavaScript腳本

4. 　　DOM樹渲染完成

5. 　　載入未完成的外在資源（如圖片）

6.        頁載入成功

　　那麼在這整個過程中觸發了哪些常用的事件呢？

document readystatechange事件

　　readyState 屬性描述了文件的載入狀態，在整個載入過程中 document.readyState會不斷變化，每次變更都會觸發readystatechange事件。

　　readyState 有以下狀態：

　　　　loading / 載入document 仍在載入。

　　　　interactive / 互動文件已完成加載，文件已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在加載。

　　　　complete / 完成T文件和所有子資源已完成載入。狀態表示 load 事件即將被觸發。

　　比如說在步驟2的時候對應 interactive   步驟5之後對應complete ，都會觸發readystatechange事件。

　　PS:文檔，圖片等載入時的readyState 和 XMLHttpRequest.readyState 是不一樣的。要注意區分

document DOMContentLoaded事件

　　DOM樹渲染完成時觸發DOMContentLoaded事件，此時​​可能外部資源仍在載入。 jquery中的ready事件就是同樣的效果

window load事件

　　所有的資源全部載入完成會觸發window 的 load事件。

　　doucment 的load事件無法觸發，但是MDN上卻有這個事件？求大神指導！ ！ ！

實例

  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <script type="text/javascript">
    console.log(&#39;resolve body JavaScript&#39;);
   
    window.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;window load&#39;);
    })

    document.addEventListener(&#39;readystatechange&#39;,function(){
      console.log(&#39;document &#39; + document.readyState);
    })

    document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;document DOMContentLoaded&#39;);
    })    //document 没有load事件??    document.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;document load&#39;);
    })  </script>

　　在chrome中的日誌輸出如下：

　　resolve body JavaScript --> document interactive --> document DOMContentLoaded --> document complete -->  window load 

　　完全符合預期有木有。所以在只需要文檔結構載入完成就可以執行的腳本，可以監聽DOMContentLoaded ；需要所有內容都載入完成才能執行的腳本，要監聽window.onload  或 document.readyState === 'complete'。　　

以上是頁面載入時觸發的事件及順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！