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 July 2015.

Die Document.readyState-Eigenschaft beschreibt den Ladezustand des document. Wenn sich der Wert dieser Eigenschaft ändert, wird ein readystatechange-Ereignis auf dem document-Objekt ausgelöst.

Wert

Der readyState eines Dokuments kann einer der folgenden sein:

loading

Das document lädt noch.

interactive

Das Dokument ist fertig geladen und das Dokument wurde geparst, aber Unterressourcen wie Skripte, Bilder, Stylesheets und Frames laden noch. Der Zustand zeigt an, dass das DOMContentLoaded-Ereignis gleich ausgelöst wird.

complete

Das Dokument und alle Unterressourcen sind fertig geladen. Der Zustand zeigt an, dass das load-Ereignis gleich ausgelöst wird.

Beispiele

Verschiedene Zustände der Bereitschaft

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 als Alternative zum DOMContentLoaded-Ereignis

js
// Alternative to DOMContentLoaded event
document.onreadystatechange = () => {
  if (document.readyState === "interactive") {
    initApplication();
  }
};

readystatechange als Alternative zum load-Ereignis

js
// Alternative to load event
document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    initApplication();
  }
};

readystatechange als Ereignislistener, um das DOM vor DOMContentLoaded einzufügen oder zu ändern

js
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