Document: readyState-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die Document.readyState-Eigenschaft beschreibt den Ladezustand des Dokuments.
Wenn sich der Wert dieser Eigenschaft ändert, wird ein readystatechange-Ereignis auf dem Dokument-Objekt ausgelöst.
Wert
Der readyState eines Dokuments kann einer der folgenden Werte sein:
loading-
Das
Dokumentwird noch geladen (das heißt, der HTML-Parser arbeitet noch). interactive-
Das Dokument wurde geparst, aber Unterressourcen wie deferred und module-Skripte, Bilder, Stylesheets und Frames werden noch geladen. Sobald sich das Dokument in diesem Zustand befindet und die deferred und module Skripte ausgeführt wurden, wird das
DOMContentLoaded-Ereignis ausgelöst. complete-
Das Dokument und alle Unterressourcen sind vollständig geladen. Dieser Zustand zeigt an, dass das
load-Ereignis kurz davor steht, ausgelöst zu werden.
Beispiele
Verschiedene Bereitschaftszustände
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 als Alternative zum DOMContentLoaded-Ereignis
// Alternative to DOMContentLoaded event
document.onreadystatechange = () => {
if (document.readyState === "interactive") {
initApplication();
}
};
readystatechange als Alternative zum load-Ereignis
// Alternative to load event
document.onreadystatechange = () => {
if (document.readyState === "complete") {
initApplication();
}
};
readystatechange als Event-Listener, um das DOM vor DOMContentLoaded einzufügen oder zu ändern
document.addEventListener("readystatechange", (event) => {
if (event.target.readyState === "interactive") {
initLoader();
} else if (event.target.readyState === "complete") {
initApp();
}
});
Spezifikationen
| Specification |
|---|
| HTML # current-document-readiness |
Browser-Kompatibilität
Siehe auch
- Verwandte Ereignisse: