DOMContentLoaded

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Das DOMContentLoaded-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wartet dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das load-Event sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das load-Event zu benutzen, obwohl DOMContentLoaded wesentlich besser geeignet wäre.

Hinweis: Synchrones JavaScript pausiert das Parsen des DOM.

Hinweis: Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.

Performanz

Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das JavaScript asynchron ausgeführt und das Laden der Stylesheets optimiert werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.

Allgemeine Informationen

Specification
HTML5
Interface
Event
Bubbles
Ja
Abbrechbar
Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)
Ziel
Doument
Standardaktion
Keine

Eigenschaften

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not
cancelable Read only Boolean Whether the event is cancellable or not?

Beispiel

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

for(var i=0; i<1000000000; i++)
{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst.
</script>

Browserkompatibilität

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] (Ja) 1.0 (1.7 oder früher)[1] 9.0[2] 9.0 3.1[1]
  
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Ja)[1] (Ja) 1.0 (1)[1] ?[2] (Ja) (Ja)[1]

[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.

[2] Internet Explorer 8 unterstützt das  readystatechange-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, document.documentElement.doScroll("left"); auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.

Verwandte Events

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: horlabs
 Zuletzt aktualisiert von: horlabs,