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.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

LG zeigt elastisches OLED-Display

Es lässt sich um bis zu 50 Prozent dehnen. Allerdings besitzt es eine deutliche geringere…

4 Stunden ago

BSI zu Cybersicherheit: Bedrohungslage bleibt angespannt

Allerdings nimmt auch die Resilienz gegenüber Cyberattacken zu. Das BSI hat außerdem die Cybersicherheit anstehender…

4 Stunden ago

IT-Ausgaben in Europa steigen 2025 voraussichtlich um 8,7 Prozent

Es ist das größte Wachstum in einem Jahr seit 2021. Unter anderem lässt das Interesse…

13 Stunden ago

Magento-Agentur für große Webshops: Was sollte die Magento-Agentur leisten können?

Magento zählt zu den führenden Shopsystemen in der Welt. Es punktet mit hoher Flexibilität und…

1 Tag ago

Trojaner tarnt sich als AutoCAD

SteelFox gelangt über angebliche Cracks für kostenpflichtige Anwendungen auf die Rechner seiner Opfer. Betroffen sind…

1 Tag ago

Ymir: Ransomware mit ausgeklügelter Verschleierung

Ymir nutzt fortschrittliche Verschleierungsmethoden. Sie verschlüsselt bestimmte Dateien auf einer Whitelist nicht, um einer Entdeckung…

1 Tag ago