Bilder beim Seitenaufruf vorab laden

Manchmal kann es ganz praktisch sein, Bilder beim Laden einer Seite vorab zu laden. Zum Beispiel wenn man auf der Seite Bildwechsel mit einem hover-Effekt eingebaut hat. Dort ist es von Vorteil, wenn das Bild beim darüber fahren mit der Maus ohne Verzögerung wechselt - hierzu hilft es die Bilder vorab in den Cache des Browsers zu laden.

Dies lässt sich zum Beispiel mit Java Script oder mit CSS umsetzen. Persönlich bevorzuge ich die Variante mit CSS, da Java Script nicht jeder freigeschalten hat und die Java Script Funktion von Suchmaschinen nicht gern gesehen wird.

Bilder vorab laden mit CSS

Hierzu werden die Bilder am Anfang der Seite geladen, wobei deren Größe auf 1x1 Pixel gestellt. Diese werden von einem div umgeben, welches per CSS ausgeblendet wird.

Folgendermaßen sieht dann der HTML-Code aus (ganz an den Anfang des body Bereiches):

 

<body>
<div id="vorab-laden">
<img src="/bild.jpg" width="1" height="1" />
<img src="/bild2.jpg" width="1" height="1" />
</div>
...

Der notwendige CSS-Code sieht dann folgendermaßen aus:

div#vorab-laden {
 display: none;
}

{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

Bilder vorab laden mit Java Script

Mit der Funktion preloader kann man ebenfalls Bilder vorab in den Cache des Browsers laden. Das ganze ist aber etwas aufwendiger als mit CSS.

Zum Thema preloader gibts unzählige Hilfen und fertige Scripte im Internet. Werde bei Gelgenheit welche testen und hier vorstellen.

Wichtig ist auch zu erwähnen, dass Suchmaschinen diese Funktion nicht gerne sehen. Also besser auf die CSS-Variante oder auf eine gute Bild-Komprimierung zurückgreifen.