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 sein:
loading-
Das
Dokumentwird noch geladen (das heißt, der HTML-Parser arbeitet noch). interactive-
Das Dokument wurde analysiert, aber Unterressourcen wie verzögerte und Modul-Skripte, Bilder, Stylesheets und Frames werden noch geladen. Sobald dieser Zustand erreicht ist und die verzögerten und Modul-Skripte ausgeführt wurden, wird das
DOMContentLoaded-Ereignis ausgelöst. complete-
Das Dokument und alle Unterressourcen wurden vollständig geladen. Dieser Zustand zeigt an, dass das
load-Ereignis gleich ausgelöst wird.
Beispiele
Verschiedene Zustände der Bereitschaft
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
| Specification |
|---|
| HTML # current-document-readiness |
Browser-Kompatibilität
Siehe auch
- Verwandte Ereignisse: