Zur Machart Studios Website
Back to top

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.

Von Christian Depperschmidt

Der Web-Entwickler ist fit in interaktiven Anwendungen, PHP, Ajax und C# sowie im Bereich der User Experience. Christian gründete ein Start-up, bei welchem Fotoprodukte umfangreich online gestaltet und bestellt werden können. Der gelernte Kaufmann hat schon viele eigenständige Softwareprojekte bei Media Markt umsetzen dürfen. Er mag nicht nur die russische Küche, sondern greift auch immer wieder mal selbst zum Kochlöffel. Bei Machart Studios sorgt er als Team-DJ mit lässiger Musik für ein produktives Arbeitsklima.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Machart Studios Werbeagentur