onload mit Nebenwirkung
Der Javascript-Eventhandler onload dürfte ja den meisten Javascript-Entwicklern bekannt sein.
window.onload stellt eine einfache und schnelle Möglichkeit dar, um Javascript-Code nach dem vollständigen Laden des Dokuments auszuführen – und genau da liegt der Hase im Pfeffer: Nach dem vollständigen Laden: Das bedeutet, dass erst sämtliche Objekte wie Bilder oder Videos geladen werden müssen, bis das Event ausgelöst wird. Bei Skripten wie beispielsweise Lightbox oder Abwandlungen hat das nun den Effekt, dass – sofern das Dokument noch nicht fertig geladen ist – die Lightbox nicht aktiviert ist. Klickt nun ein Benutzer auf ein Bild während das Dokument noch läd, so wird das Bild erstmal normal geladen, die Lightbox erscheint nicht.
Doch es gibt Abhilfe: onDomReady lautet das Schlagwort, dass den Code ausführt, sobald das Dokument geladen ist und das DOM-Modell bereit ist. Optimal also, um beispielsweise das Lightbox-Skript zu laden, oder? Eher “oder”. Denn – wie sollte es anders sein – der Internet Explorer kann damit natürlich nichts anfangen. Aber keine Sorge: Auch hier gibt es Workarounds für Microsofts Browser.
In letzter Zeit habe ich mich auch mit dem Thema beschäftigt und eine Lösung geschrieben, die in allen Browsern funktionieren sollte, auch mit mehreren Events. Dabei habe ich die einfachste aller Varianten aber vergessen: Ein Skript-Block kurz vor Ende des Skriptes, der das Ladeskript ausführt funktioniert bestens und ohne großen Aufwand:
<body> <!-- HTML-Dokumentinhalt --> <script type="text/javascript"> //<![CDATA lade_alle_skripte(); //]]> </script> </body> </html>
Um das Skript noch zu vereinfachen kann man ein einfaches Objekt erstellen, dass alle gewünschten Funktionen aufruft. Ein solches Skript lässt sich hier herunterladen: domReady Skript.
Die Verwendung ist prinzipiell sehr einfach, es existiert auch ein einfaches Beispielskript.
Das Skript muss (sollte) im head-Bereich des Skriptes eingebunden werden, danach können Funktionen hinzugefügt werden, die bei geladenem DOM ausgeführt werden sollen.
domReady.add (function () { alert ('DOM is ready. (domReady function)'); });
Am Ende des Dokuments muss dann nur noch die Ausführung angestoßen werden:
<script type="text/javascript"> //<![CDATA[ domReady.run(); //]]> </script>
Mir ist klar, dass es noch einfachere Methoden gibt, Skripte bei fertiggestelltem DOM auszuführen, aber diese Methode bietet auch ein gewisses Maß an Komfort, zumal das Skript nicht sonderlich groß ist – mit einem Javascript-Packer ließe sich die Größe noch reduzieren.