Preloading mit dem Javascript-Image-Objekt

In einem Browser werden Bilder normalerweise nur nach einem entsprechenden HTTP-Request geladen, entweder passiv über einen <img>-Tag oder aktiv durch einen Methodenaufruf. Wenn man also per JavaScript Bilder bei einem Mouse-over auswechselt oder Bilder nach einer bestimmten Zeitspanne automatisch austauscht, kann es zwischen wenigen Sekunden bis zu ein paar Minuten dauern, ehe das Bild vom Server abgerufen ist. Besonders stark fällt dies ins Gewicht, wenn man nur über eine langsame Internetanbindung verfügt oder die zu ladenden Bilder sehr groß sind. Auf jeden Fall macht die Verzögerung den gewünschten Effekt zunichte.

Einige Browser versuchen dieses Problem zu umgehen, indem sie die Bilder im lokalen Cache zwischenspeichern, so dass nachfolgende Aufrufe des Bildes sofort erledigt werden können. Beim allerersten Aufruf eines Bildes gibt es jedoch trotzdem eine Verzögerung. Preloading ist ein Verfahren um das Bild in den Cache herunterzuladen, bevor es benötigt wird. Auf diese Weise kann das Bild bei Bedarf aus dem Cache abgerufen und sofort angezeigt werden.

Das Image()-Objekt

Die einfachste Möglichkeit, ein Bild im Voraus zu laden, besteht darin, in Javascript ein neues Image()-Objekt zu instanziieren und diesem die URL des gewünschten Bildes zu übergeben. Angenommen es gibt ein Bild namens heavyimagefile.jpg, das angezeigt werden soll wenn der Benutzer mit dem Mauszeiger über ein bereits angezeigtes Bild fährt. Um dieses Bild für eine schnellere Reaktionszeit im Voraus zu laden, erstellt man einfach ein neues Image()-Objekt namens heavyImage und lädt es mithilfe des onLoad()-Event-Handlers gleichzeitig mit der Seite:

Man beachte, dass der image-Tag selbst die Events onMouseOver() und onMouseOut() nicht kennt, weshalb der <img>-Tag im obigen Beispiel in einen <a>-Tag eingeschlossen ist, der diese beiden Events unterstützt.