Größere Grafiken bei Seitenaufruf in Hintergrund "vorladen"

[Tobi44]

Hallo,

da ich einige größere Grafiken (400kb+) für bestimmte Bereiche einer Website verwende, Besucher aber sowieso zuvor auf einer Seite landen, die keine großen Bilder enthält, und erst von dieser auf den Bereich mit Hintergrundgrafiken geleitet werden, möchte ich einige dieser Grafiken vom Browser bereits beim ersten Seitenaufruf im Hintergrund unbemerkt "vorladen" (also ohne, dass sie da schon irgendwie angezeigt werden), sodass der Browser sie im Cache speichert und dem User, der mit dem nächsten Klick im entsprechenden Bereich landet, direkt anzeigt.

Sieht nämlich blöd aus, wenn diese bedeutenden Grafiken erst einige Sekunden nach dem Seitenaufbau geladen werden. Auch z.B. beim Mouseover: Kleine Grafik wird schnell geladen, wenn man mit der Maus drüber fährt dauert es erstmal eine Weile, bis die größere Grafik angezeigt wird.

Das trifft natürlich vor allem User, die über eine langsame Internetverbindung (mobil) oder wie ich - mit DSL 2000 surfen...
Habe leider überhaupt keine Idee, wie sich das machen lässt und ob das überhaupt mit HTML/CSS möglich ist - daher in diesem Forum gepostet.

 

[threadi]

Binde die Grafiken per img-Element ein, welches mit absoluter Positionierung irgendwo nach außerhalb des Viewports geschoben wird.

img.weg {
 position: absolute;
 top: -20000px;
 left: -20000px;
}

Alternativ wäre so etwas auch mit JavaScript möglich. Such mal nach "JavasScript preload".

 

[Tobi44]

Danke, funktioniert wunderbar. :)