Document.readyState — Eigenschaft · JavaScript-Referenz

Signatur

Document.readyState

Beschreibung

document.readyState gibt an, wie weit das Laden und Verarbeiten eines Dokuments fortgeschritten ist. Die Eigenschaft ist schreibgeschützt und kann genau drei Werte annehmen:

"loading": Das Dokument wird noch geladen und geparst.
"interactive": Das Parsen ist abgeschlossen und der DOM-Baum ist vollständig. Unterressourcen wie Bilder, Stylesheets und Frames können noch laden. Direkt danach wird DOMContentLoaded ausgelöst.
"complete": Das Dokument und alle Unterressourcen sind geladen. Kurz danach wird das load-Ereignis am window ausgelöst.

Bei jeder Zustandsänderung löst das Dokument das Ereignis readystatechange aus. Damit lässt sich der Ladefortschritt zuverlässig verfolgen, auch in Skripten, die erst spät eingebunden oder nachgeladen werden.

Der häufigste Einsatzfall ist eine robuste „DOM-bereit"-Prüfung: Ein Skript, das möglicherweise erst nach DOMContentLoaded ausgeführt wird (etwa bei dynamisch eingefügten Skripten, Bibliotheken oder Browser-Erweiterungen), würde das Ereignis verpassen. Mit einer Prüfung von readyState lässt sich der Initialisierungscode entweder sofort oder erst nach dem passenden Ereignis ausführen.

Rückgabewert

Typ

"loading" | "interactive" | "complete"

Beschreibung

Eine Zeichenkette mit dem aktuellen Ladezustand des Dokuments.

Beispiele

DOM-bereit-Funktion, die nie ein Ereignis verpasst

const onReady = (callback) => {
  if (document.readyState === 'loading') {
    // DOM wird noch geparst – auf das Ereignis warten
    document.addEventListener('DOMContentLoaded', callback, { once: true });
  } else {
    // 'interactive' oder 'complete': DOM ist bereits verfügbar
    callback();
  }
};

onReady(() => {
  console.log('DOM bereit, Zustand:', document.readyState);
  document.querySelector('h1')?.classList.add('bereit');
});

DOM bereit, Zustand: interactive

Zustandswechsel mit readystatechange protokollieren

console.log('Start:', document.readyState);

document.addEventListener('readystatechange', () => {
  console.log('Neuer Zustand:', document.readyState);
});

// Alternativ über die on-Property:
// document.onreadystatechange = () => { ... };

Start: loading Neuer Zustand: interactive Neuer Zustand: complete

Erst nach vollständigem Laden aller Ressourcen messen

const whenComplete = () =>
  new Promise((resolve) => {
    if (document.readyState === 'complete') {
      resolve();
    } else {
      window.addEventListener('load', () => resolve(), { once: true });
    }
  });

const init = async () => {
  await whenComplete();
  // Bilder sind jetzt geladen, Abmessungen sind zuverlässig
  const images = [...document.images];
  console.log(`Bilder geladen: ${images.length}`);
  console.log('Höhe der Seite:', document.documentElement.scrollHeight);
};

init();

Bilder geladen: 3 Höhe der Seite: 2480

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie document.readyState = 'complete' wird still ignoriert bzw. wirft im Strict Mode einen TypeError, weil es nur einen Getter gibt.
Nicht nur auf "complete" prüfen: Für DOM-Zugriffe reicht "interactive". Die Prüfung readyState !== 'loading' ist meist die richtige Bedingung für „DOM bereit".
Verzögerte Skripte: Skripte mit defer und Modul-Skripte (type="module") laufen, wenn readyState schon "interactive" ist, aber noch vor DOMContentLoaded. async-Skripte können in jedem Zustand laufen.
Reihenfolge der Ereignisse: readystatechange (interactive) → DOMContentLoaded → readystatechange (complete) → load.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Sehr alte Internet-Explorer-Versionen (vor IE 11) kannten zusätzliche Werte wie "uninitialized" und "loaded" und setzten "interactive" teils zu früh. Für aktuelle Browser ist das nicht mehr relevant.
Bei iframe-Dokumenten hat jedes Dokument seinen eigenen readyState. Zugriff über iframe.contentDocument.readyState ist nur bei gleichem Ursprung (Same-Origin) möglich.

Siehe auch

Document EventTarget.addEventListener() XMLHttpRequest.readyState FetchEvent.preloadResponse Document.doctype