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 2015年7月.
Document.readyState 屬性描述文件的載入狀態。當此屬性的值改變時，readystatechange 事件會在 document 物件上觸發。
值
文件的 readyState 可以是以下之一：
loading-
文件仍在載入中。
interactive-
文件已完成載入並且已被解析，但子資源（例如腳本、圖片、樣式表和框架）仍在載入中。此狀態表示
DOMContentLoaded事件即將觸發。 complete-
文件和所有子資源已完成載入。此狀態表示
load事件即將觸發。
範例
不同的載入狀態
js
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 事件的替代方案
js
// DOMContentLoaded 事件的替代方案
document.onreadystatechange = () => {
if (document.readyState === "interactive") {
initApplication();
}
};
使用 readystatechange 作為 load 事件的替代方案
js
// load 事件的替代方案
document.onreadystatechange = () => {
if (document.readyState === "complete") {
initApplication();
}
};
使用 readystatechange 事件監聽器在 DOMContentLoaded 之前插入或修改 DOM
js
document.addEventListener("readystatechange", (event) => {
if (event.target.readyState === "interactive") {
initLoader();
} else if (event.target.readyState === "complete") {
initApp();
}
});
規範
| Specification |
|---|
| HTML # current-document-readiness |
瀏覽器相容性
Loading…