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

Taugen Kryptowährungen als Unterstützer der Energiewende?

Bankhaus Metzler und Telekom-Tochter MMS testen, inwieweit Bitcoin-Miner das deutsche Stromnetz stabilisieren könnten.

6 Stunden ago

Supercomputer-Ranking: El Capitan überholt Frontier und Aurora

Mit 1,7 Exaflops ist El Capitan nun der dritte Exascale-Supercomputer weltweit. Deutschland stellt erneut den…

10 Stunden ago

Ionos führt neue AMD-Prozessoren ein

Der deutsche Hyperscaler erweitert sein Server-Portfolio um vier Angebote mit den neuen AMD EPYC 4004…

10 Stunden ago

Lags beim Online-Gaming? DSL-Vergleich und andere Tipps schaffen Abhilfe

Beim Online-Gaming kommt es nicht nur auf das eigene Können an. Auch die technischen Voraussetzungen…

11 Stunden ago

GenKI-Fortbildung immer noch Mangelware

Fast jedes zweite Unternehmen bietet keinerlei Schulungen an. In den übrigen Betrieben profitieren oft nur…

11 Stunden ago

Netzwerk-Portfolio für das KI-Zeitalter

Huawei stellt auf der Connect Europe 2024 in Paris mit Xinghe Intelligent Network eine erweiterte…

13 Stunden ago