在沒有框架的情況下了解DOM 準備

開發Web 應用程式時，確定文件物件模型(DOM) 何時準備好進行操作至關重要。雖然像 jQuery 這樣的框架提供了 readyState 偵聽器，但本文探討了偵測 DOM 就緒情況的替代方法。

直接存取 DOM State

您可以直接存取 DOM State，而不是依賴框架，您可以直接存取 DOM 狀態。檢查文件的readyState屬性：

if (document.readyState === 'complete') {
  // DOM is ready
}

但是，這種方法在瀏覽器中並不可靠，因為有些瀏覽器可能無法提供準確的readyState值。

基於事件的DOM就緒檢查

一種更跨瀏覽器的方法是監聽DOMContentLoaded 事件，該事件在DOM 準備好時觸發操作：

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

利用jQuery 未記錄的isReady 屬性

儘管未記錄，jQuery 公開了一個isReady 屬性，該屬性在內部指示DOM 就緒狀態：

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

輕量級DOM Ready 片段

受Dustin Diaz 片段的啟發，您可以創建一個迷你DOM 就緒監聽器，如下所示：

if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}

此檢查利用了以下事實：readyState 值在早期載入狀態中包含“in”，使其成為 DOM 就緒情況的可靠指標。