Document: DOMContentLoaded Ereignis

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.

Das DOMContentLoaded Ereignis wird ausgelöst, wenn das HTML-Dokument vollständig geparst wurde und alle verzögerten Skripte (<script defer src="…"> und <script type="module">) heruntergeladen und ausgeführt wurden. Es wartet nicht auf andere Dinge wie Bilder, Subframes und asynchrone Skripte, um das Laden zu beenden.

DOMContentLoaded wartet nicht auf das Laden von Stylesheets, jedoch warten verzögerte Skripte auf Stylesheets, und das DOMContentLoaded Ereignis wird nach verzögerten Skripten in die Warteschlange gestellt. Auch Skripte, die weder verzögert noch asynchron sind (z. B. <script>), warten darauf, dass bereits geparste Stylesheets geladen werden.

Ein anderes Ereignis, load, sollte nur verwendet werden, um eine vollständig geladene Seite zu erkennen. Es ist ein häufiger Fehler, load zu verwenden, wo DOMContentLoaded angemessener wäre.

Dieses Ereignis kann nicht abgebrochen werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("DOMContentLoaded", (event) => {});

Ereignistyp

Ein generisches Event.

Beispiele

Grundlegende Verwendung

js
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});

Verzögern von DOMContentLoaded

html
<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");
  });

  for (let i = 0; i < 1_000_000_000; i++);
  // This synchronous script is going to delay parsing of the DOM,
  // so the DOMContentLoaded event is going to launch later.
</script>

Überprüfen, ob das Laden bereits abgeschlossen ist

DOMContentLoaded kann ausgelöst werden, bevor Ihr Skript die Möglichkeit hat, ausgeführt zu werden. Daher ist es ratsam, dies vor dem Hinzufügen eines Listeners zu überprüfen.

js
function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  // Loading hasn't finished yet
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` has already fired
  doSomething();
}

Hinweis: Es gibt hier keine Race-Bedingung — es ist nicht möglich, dass das Dokument zwischen der if-Prüfung und dem addEventListener()-Aufruf geladen wird. JavaScript hat Ausführungssemantik bis zur Vollendung, was bedeutet, dass, wenn das Dokument in einem bestimmten Tick der Ereignisschleife lädt, es erst im nächsten Zyklus geladen werden kann, zu diesem Zeitpunkt der doSomething-Handler bereits angehängt ist und ausgelöst wird.

Live-Beispiel

HTML

html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

JavaScript

js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += "DOMContentLoaded\n";
});

Ergebnis

Spezifikationen

Specification
HTML Standard
# stop-parsing

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch