CSS, HTML und Javascript mit {stil}

DOMContentLoaded – Dokument geladen

DOMContentLoaded vs onload: Nur das Dokument geladen, nicht aber externe Resourcen 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, Ads und iframes wie das load-Event.

Das Laden von Stylesheet 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.

Wie die Browser das Dokument laden und rendern
Der Browser holt des Dokument von der URL, sieht nach, ob er etwas im Cache hat, baut das DOM auf, positioniert die Elemente, rendert die Bilder oder Grafik.

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).

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

    // Bild ist noch nicht geladen 
    // falls es nicht vorher im Cache war
    
    var 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 Resourcen 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.

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