Dokument: 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 darauf, dass andere Elemente wie Bilder, Unterrahmen und asynchrone Skripte fertig geladen sind.

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 ist nicht abbrechbar.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-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ögerung 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üfung ob die Ladephase bereits abgeschlossen ist

DOMContentLoaded kann ausgelöst werden, bevor Ihr Skript die Chance hat, ausgeführt zu werden. Es ist daher ratsam, dies zu überprüfen, bevor Sie einen Listener hinzufügen.

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: Hier gibt es keine Race-Bedingung – es ist nicht möglich, dass das Dokument zwischen der if-Überprüfung und dem addEventListener()-Aufruf geladen wird. JavaScript hat Semantiken zur Fertigstellung, was bedeutet, dass, wenn sich das Dokument in einem bestimmten Tick der Ereignisschleife im Ladevorgang befindet, es erst im nächsten Zyklus geladen werden kann, zu welchem Zeitpunkt der doSomething-Handler bereits angefügt ist und ausgeführt 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
# stop-parsing

Browser-Kompatibilität

Siehe auch