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.

documentDocument.readyState 屬性描述文件的讀取狀態。

數值

文件的 readyState 數值如下:

loading

document 正在讀取中。

interactive

文件已經完成讀取和解析,但是其他的子資源,如「圖片樣式層次表」,仍然在讀取。這個狀態表示 DOMContentLoaded 事件已經被觸發。

complete

文件及子資源都完成讀取。這個狀態表示 load 事件即將被觸發。

當這個屬性的數值改變時, readystatechange 事件在 document 上觸發。

表達式

js
var string = document.readyState;

範例

不同的狀態

js
switch (document.readyState) {
  case "loading":
    // 文件讀取中。
    break;
  case "interactive":
    // 文件已經完成讀取。可以使用 DOM 元素。
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 頁面已經完成讀取。
    console.log(
      "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
    );
    break;
}

readystatechange 替代 DOMContentLoaded

js
// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};

readystatechange 替代 load

js
// alternative to load event
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
};

規範

Specification
HTML Standard
# current-document-readiness

參見