Preloading mit dem Javascript-Image-Objekt

In der Praxis wird man wahrscheinlich mehr als nur ein Bild im Voraus laden müssen, zum Beispiel für eine Menüleiste mit mehreren Rollovers, oder wenn man einen nahtlosen Animationseffekt erzeugen will. Kein Problem – man muss dazu nur wie im folgenden Beispiel auf Javascript-Arrays zurückgreifen:

Im obigen Beispiel definiert man eine Variable i sowie ein Image()-Objekt namens imageObj. Dann definiert man ein neues Array namens images[], wobei jedes Array-Element den Dateinamen des im Voraus zu ladenden Bildes speichert. Und schließlich erstellt man eine for()-Schleife zum Durchlaufen des Arrays und weist jedes Bild dem Image()-Objekt zu, so dass es in den Cache geladen wird.

Der Event-Handler onLoad()

Wie viele andere Objekte in Javascript verfügt auch das Image()-Objekt über einige Event-Handler. Der nützlichste von ihnen ist zweifellos der onLoad()-Handler, der aufgerufen wird, sobald das Bild vollständig geladen ist. Dieser Handler kann mit einer eigene Funktion verknüpft werden, um bestimmte Aufgaben auszuführen, nachdem das Bild geladen ist. Das folgende Beispiel illustriert dies, indem es eine Meldung "Bitte warten…" ausgibt während das Bild lädt und den Browser nach Beendigung des Ladevorgangs an eine neue URL weiterleitet.

Natürlich kann man auch ein Array mit mehreren Bildern erstellen, das durchlaufen wird, und jedes einzelne Bild im Voraus laden, wobei man bei jedem Durchgang verfolgen kann, wie viele Bilder bereits geladen sind. Der Event-Handler kann so programmiert werden, dass er den Browser auf die nächste Seite weiterleitet (oder eine andere Aufgabe ausführt), sobald alle Bilder geladen sind.