search

4.11 DOMContentLoaded 事件與 load 事件

  • DOMContentLoaded 事件，綁定在 document 物件上：節點的部份在畫面上都渲染完，就會觸發 DOMContentLoaded 事件。

  • load 事件，綁定在 window 物件上：頁面上所有的東西(素材類的)都在畫面上渲染完之後，才會觸發 load 事件。

建立 domcontentload.html，內容如下，測試看看，留意觸發的時機點：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    
    <div>以下這張圖有近6M大小</div>
    
    <!-- 這張圖有 6M 的大小 -->
    <img src="https://alldata.sgp1.digitaloceanspaces.com/images/mountain.jpg" id="my_img">

    <script>
      // 圖片等資源載入完成之後，load 事完觸發
      window.addEventListener("load", function(){
        console.log("圖片載入完成");
      });
      
      // DOM 載入完成之後，DOMContentLoaded 事件觸發
      document.addEventListener("DOMContentLoaded", function(){
        console.log("DOM 載入完成");
      });
    </script>
  </body>
</html>

建立 windowload.html 內容如下，測試看看：

一個動畫區域蓋住整個頁面，等到所有東西都渲染完之後，才將動畫區域給移除，就適合用 load 事件。

Previous4.10 DOM 刪除節點、屬性Next4.12 滑鼠相關事件

Last updated