MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

總覽

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

數值

文件的 readyState 數值如下:

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

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

表達式

var string = document.readyState;

範例

不同的狀態

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

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

readystatechange 替代 load

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

規範

規範 狀態
WHATWG HTML Living Standard
The definition of 'Document readiness' in that specification.
Living Standard  
HTML5.1
The definition of 'Document readiness' in that specification.
Recommendation  
HTML5
The definition of 'Document readiness' in that specification.
Recommendation Initial specification.

參見

文件標籤與貢獻者

標籤: 
 此頁面的貢獻者: StanleyDing, jackblackevo, Shiyou, alk03073135
 最近更新: StanleyDing,