Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
DieDocument.readyState-Eigenschaft beschreibt den Ladezustand desDokuments.Wenn sich der Wert dieser Eigenschaft ändert, wird einreadystatechange-Ereignis auf demDokument-Objekt ausgelöst.
Wert
DerreadyState eines Dokuments kann einer der folgenden Werte sein:
loadingDas
Dokumentwird noch geladen (das heißt, der HTML-Parser arbeitet noch).interactiveDas Dokument wurde geparst, aber Unterressourcen wiedeferred undmodule-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.completeDas 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 eventdocument.onreadystatechange = () => { if (document.readyState === "interactive") { initApplication(); }};readystatechange als Alternative zum load-Ereignis
// Alternative to load eventdocument.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: