onload事件和domcontentloaded哪個先執行呢？

王铁柱6發表於2024-11-28
事件

DOMContentLoaded 事件先於 load 事件執行。

  • DOMContentLoaded: 當 HTML 文件被完全解析和 DOM 樹構建完成後觸發，不包括樣式表、圖片和子框架等外部資源的載入。這意味著即使圖片或樣式表仍在載入，DOMContentLoaded 也會觸發。 你可以把它理解為“DOM 準備好了”。

  • load: 當整個頁面及其所有依賴資源（例如樣式表、影像、指令碼和子框架）完全載入完成後觸發。 你可以把它理解為“頁面完全載入好了”。

因此，執行順序是：DOMContentLoaded -> load

實際應用場景舉例：

  • 如果你想盡快操作 DOM，例如新增事件監聽器或修改 DOM 元素的樣式，應該在 DOMContentLoaded 事件中執行程式碼。這樣可以提高使用者體驗，因為使用者不必等待所有資源都載入完成就可以看到頁面內容並進行互動。

  • 如果你需要在所有資源都載入完成後執行某些操作，例如獲取圖片的尺寸或執行依賴於外部指令碼的程式碼，則應該在 load 事件中執行程式碼。

程式碼示例：

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM fully loaded and parsed');
  // 可以在這裡安全地操作 DOM
});

document.addEventListener('load', function() {
  console.log('Page fully loaded');
  // 可以在這裡訪問所有資源，例如圖片的尺寸
});

window.onload = function() {
    console.log('Page fully loaded (using onload property)'); // 和上面的 addEventListener('load') 效果相同
};

總結: DOMContentLoaded 更加註重 HTML 文件本身的載入完成，而 load 則關注的是整個頁面及其所有資源的載入完成。 選擇哪個事件取決於你的具體需求。 如果只是操作 DOM，DOMContentLoaded 效率更高；如果需要所有資源都載入完畢，則選擇 load。

相關文章