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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-tw/web/api/document/index.md)

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

參見