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 Dokument wird 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:

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden