Document：readyState 屬性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Document.readyState 屬性描述文件的載入狀態。當此屬性的值改變時，readystatechange 事件會在 document 物件上觸發。

值

文件的 readyState 可以是以下之一：

loading: 文件仍在載入中。
interactive: 文件已完成載入並且已被解析，但子資源（例如腳本、圖片、樣式表和框架）仍在載入中。此狀態表示 DOMContentLoaded 事件即將觸發。
complete: 文件和所有子資源已完成載入。此狀態表示 load 事件即將觸發。

範例

不同的載入狀態

switch (document.readyState) {
  case "loading":
    // 文件正在載入中。
    break;
  case "interactive": {
    // 文件已完成載入，我們可以存取 DOM 元素。
    // 子資源（例如腳本、圖片、樣式表和框架）仍在載入中。
    const span = document.createElement("span");
    span.textContent = "一個 <span> 元素。";
    document.body.appendChild(span);
    break;
  }
  case "complete":
    // 頁面已完全載入。
    console.log(
      `第一條 CSS 規則是：${document.styleSheets[0].cssRules[0].cssText}`,
    );
    break;
}

使用 readystatechange 作為 DOMContentLoaded 事件的替代方案

// DOMContentLoaded 事件的替代方案
document.onreadystatechange = () => {
  if (document.readyState === "interactive") {
    initApplication();
  }
};

使用 readystatechange 作為 load 事件的替代方案

// load 事件的替代方案
document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    initApplication();
  }
};

使用 readystatechange 事件監聽器在 DOMContentLoaded 之前插入或修改 DOM

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});

規範

Specification
HTML # current-document-readiness

瀏覽器相容性

參見

相關事件：