DOMContentLoaded – Dokument geladen

DOM-Content-Loaded oder DOM Content Loaded vs on load: Nur Dokument geladen, aber keine externe Ressourcen Zeigt Pfeil und Bogen fertig zum feuern

DOMContentLoaded feuert, sobald das Dokument vollständig geladen und geparst ist – aber wartet nicht auf das Laden von CSS, Bildern, Bannern und iframes wie das load-Event.

Wann ist das Bild geladen?

Das Laden von CSS-Dateien, Bildern und iframes blockiert die Ausführung von Scripts. Haben wir also ein <script> nach einem <link rel="stylesheet" ...>, wird die Seite nicht fertig geparst und DOMContentLoaded wird nicht feuern bis das Stylesheet geladen wurde.

Slideshow mit DOMContent Loaded
<script>
let i = 0;
let images = [];
let time = 3000; 

images [0] = "neptun-2400-1600.jpg";
images [1] = "berlin-2400-1600.jpg";
images [2] = "florenz-2400-1600.jpg";

function changeImg () {
	document.querySelector("#slide").src = images[i];
	if (i < images.length -1)  i++; else i = 0;
	setTimeout ("changeImg()", time);
}

document.addEventListener("DOMContentLoaded", function () {
	document.querySelector(".result").innerHTML = "Alles geladen! Warten auf die Bilder.";
});
window.onload = changeImg;
</script>

In diesem Beispiel wird DOM Content Loaded ausgeführt, wenn das Dokument geladen ist, aber wartet nicht auf das Laden aller Komponenten der Seite. Alles geladen! Warten auf die Bilder. taucht also vor dem Laden der Bilder auf.

Allerdings erzwingt auch das Laden externer Scripte (mit src, aber ohne asnyc oder defer) eine Pause im Aufbau der Seite. DOMContentLoaded feuert also erst nach der Ausführung externer Scripte.

Wenn das Dokument geladen ist

In vielen Browsern feuert window.onload nicht, bevor alle Bilder geladen wurden. Die modernen Browser haben ein Event DOMContentLoaded, das bereits feuert, wenn das DOM geladen ist und vom Script durchquert werden kann. DOMContentLoaded wird ab IE9 von allen modernen Browsern unterstützt und ist das Äquivalent zur jQuery $(function).

DOMContentLoaded unterscheidet sich von window.onload in einer weiteren Hinsicht: Es muß mit addEventListener abgefangen werden.

function ready() {
    console.log ("DOM geladen");

    // Bild ist noch nicht geladen 
    // falls es nicht vorher im Cache war
    
    let myImg = document.getElementById("myImg");
    
    // wird myImg 0 0
    
    console.log("myImg " + myImg.width + " " + myImg.height;);
  }

  document.addEventListener("DOMContentLoaded", ready);

Eine einfache Lösung für Scripte, die nicht auf Bilder, CSS-Dateien, iframes und andere externe Ressourcen warten müssen: Sie werden am Ende des Markups vor der schließenden Klammer des body-Tags geladen und nicht bereits im head-Element. Zwar wird auf diese Weise das Skript erst starten, wenn das Markup vollständig geladen ist, aber das Skript muss nicht auf das Laden der Bilder warten. Der Aufruf von Scripts am Ende des HTML-Dokuments ist heute de facto-Standard.

Aber Achtung: Auch am Ende der HTML-Datei kann sich ein Script also nicht darauf verlassen, dass die Bilder geladen sind: Vielleicht holt ein weiteres Script das Bild erst später (z.B. beim Scrollen der Seite).

Für ältere Versionen von Internet Explorer (IE < 9) kann zusätzlich das onreadystatechange Event eingesetzt werden.

DOMContentLoaded und CSS

Externe CSS-Dateien betreffen das DOM nicht, also wartet DOMContentLoaded nicht, bis sie geladen sind. Liegt das Script allerdings nach dem link-Tag der CSS-Datei, muss es warten bis die Stile ausgeführt wurden.

DOMCONTENT LOADED URL Cache Tree Display List Pixels Fetch Parse Flow Paint