16. April 2015
DOM Ready vs. Window Load
Sobald das DOM geladen ist, werden die Funktionen des jQuery Skriptes ausgeführt – lange Zeit bevor alle Seitenelemente vollständig aktiv sind. Wer einige Funktionen jedoch zu einem späteren Zeitpunkt ausführen möchte, greift zu Window Load und verzögert so den Ladezeitpunkt.
In den meisten Fällen braucht es seine Zeit, bis das DOM Ready ausgelöst wird. Innerhalb dieser Zeit sind manche Teile der Webseite inaktiv und warten auf das JavaScript. Besonders umfangreiche Webprojekte können davon signifikant betroffen sein und so langsamere Ladezeiten hervorrufen. Das Nutzererlebnis verschlechtert sind und provoziert unzufriedene User. Da das niemand möchte, haben wir hier einen guten Rat für euch. Denn mithilfe der Window Load Funktion kann dieses Problem sehr leicht umgangen werden.
Worin liegt der Unterschied zwischen Dom Ready und Window Load?
Der größte Unterschied zwischen dem document.ready (Dom Ready) und window.load liegt wohl im Zeitpunkt der Ausführung. Da Dom Ready auslöst, sobald das DOM ausgeführt wurde, ist es in der Regel schneller als das Window Load. Die Funktion wird nämlich erst ausgeführt, sobald alle Elemente der Seite geladen wurden. Erst dann können Height oder Width eines Bildes ausgelesen werden. Gerade wenn das Skript sehr lange ist und viele Elemente wie Videos und Bilder beinhaltet, kann sich dies hinauszögern und zu Problemen führen. Durch die verspätete Ausführung jedoch, können alle Objekte und Bilder miteingeschlossen werden.
Im jQuery-Code sieht das dann beispielsweise so aus:
$(document).ready(function(){
console.log(‚Dom ist bereit zur Manipulation‘);
});
$(window).load(function(){
console.log(‚Browser ist vollständig fertig mit laden des Contents‘);
});
Welche Vorteile hat das?
Besonders empfehlenswert ist Dom Ready dann, wenn die Browserkompatibilität gewährleistet werden muss. Schließlich kann es hauptsächlich bei älteren Browsern passieren, dass Seitenelemente im DOM nicht gefunden werden. Meines Erachtens sollten erfahrene Entwickler sowohl die Dom Ready, als auch die Window Load kennen. Denn auf diesem Wege ist es möglich, auf die Reihenfolge des Ladens individuell zu reagieren und die Ausführung späterer Funktionen zu steuern. Der Code kann dadurch sicherer geschrieben werden – unnötige Funktionen hingegen, wie beispielsweise ein timeout, sind nicht notwendig.
