Bilder mittels CSS vorladen

Bilder auf einer Webseite vorzuladen hat dann Sinn, wenn Hover-Effekte verwendet werden. Wenn die Bilder nicht schnell genug geladen sind, kommt es zu unschönen Rucklern. Dies wirkt natürlich unprofessionell. Mittels CSS kann man die Bilder, die beim überfahren verwendet werden sollen schonmal vorladen.

Die Theorie:

Man erstellt einen neuen Div-Container und setzt seine Bilder hinein. Der Container kann irgendwo in einer Ecke angeordnet werden. Die Darin enthaltenen Bilder werden mittels CSS ausgeblendet bzw. versteckt. So werden die Bilder schon vor Verwendung im Hintergrund (versteckt) geladen.

Die Praxis:

<img scr="images/testbild.jpg" class="preload" />

Die dazugehörige CSS-Klasse sieht folgendermaßen aus:

.preload{
display: none;
width: 0px;
height: 0px;
border: 0px;
}

Die Bilder bekommen zusätzlich die Größe von 0x0 Pixeln, da manche Browser anstelle der ausgeblendeten Bilder kleine Quadrate darstellen. Nun stehen Hover-Effekten keine Ruckler mehr bevor.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.