Dokument: readyState-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft readyState der Schnittstelle Document beschreibt den Ladezustand des document. Wenn sich der Wert dieser Eigenschaft ändert, wird auf dem document-Objekt ein readystatechange-Ereignis ausgelöst.
Wert
Der readyState eines Dokuments kann einen der folgenden Werte haben:
loading-
Das
documentwird 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 dieser Zustand erreicht ist 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 unmittelbar ausgelöst wird.
Beispiele
Verschiedene Ladezustä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 zum Einfügen oder Ändern des DOM vor DOMContentLoaded
document.addEventListener("readystatechange", (event) => {
if (event.target.readyState === "interactive") {
initLoader();
} else if (event.target.readyState === "complete") {
initApp();
}
});
Spezifikationen
| Spezifikation |
|---|
| HTML # current-document-readiness |
Browser-Kompatibilität
Siehe auch
- Verwandte Ereignisse: