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.
addEventListener("DOMContentLoaded", (event) => {});
Ereignistyp
Ein generisches Event
.
Beispiele
Grundlegende Verwendung
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
});
Verzögern von DOMContentLoaded
<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.
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
<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
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
- Verwandte Ereignisse:
load
,readystatechange
,beforeunload
,unload