文件：readyState 屬性
Document.readyState 屬性描述了 document 的載入狀態。當此屬性的值發生變化時，會在 document 物件上觸發一個 readystatechange 事件。
值
文件的 readyState 可以是以下之一
loading-
document仍在載入中（即，HTML 解析器仍在工作）。 interactive-
文件已解析，但子資源（如延遲指令碼和模組指令碼、影像、樣式表和框架）仍在載入。一旦進入此狀態，並且延遲指令碼和模組指令碼已執行，就會觸發
DOMContentLoaded事件。 完成-
文件和所有子資源已完成載入。該狀態表示
load事件即將觸發。
示例
不同的就緒狀態
js
switch (document.readyState) {
case "loading":
// The document is loading.
break;
case "interactive": {
// The document has finished loading and we can access DOM elements.
// Sub-resources such as scripts, images, stylesheets and frames are still loading.
const span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
}
case "complete":
// The page is fully loaded.
console.log(
`The first CSS rule is: ${document.styleSheets[0].cssRules[0].cssText}`,
);
break;
}
readystatechange 作為 DOMContentLoaded 事件的替代方案
js
// Alternative to DOMContentLoaded event
document.onreadystatechange = () => {
if (document.readyState === "interactive") {
initApplication();
}
};
readystatechange 作為 load 事件的替代方案
js
// Alternative to load event
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();
}
});
規範
| 規範 |
|---|
| HTML # current-document-readiness |
瀏覽器相容性
載入中…