Home » Design / Usability

Bilder vorladen mit CSS

20 März 2009 No Comment

Um die Ladezeiten von Webseiten zu verkürzen sollte man möglichst kleine Grafiken benutzen, wenn das aber nicht möglich ist und diese Grafiken bei jedem Reload oder Pageview neu geladen werden müssen, kann sich das sehr negativ auf das Besucherverhalten und Wiederkehr auswirken. Denn der besucher wartet nicht gern über 10 oder 20 Sec nach jedem Klick bis er was zu sehen bekommt.
Besser ist hier das vorladen der Grafike. Das funktioniert auf meheren Wegen z.B. mit Javascript oder mit CSS.

In diesem Artikel nehmen wir uns das CSS vor.

Man ruft in einem div-Tag alle bilder auf, die man vorladen will, was so aussieht :

HTML

<div id=”vorladen”>
<img src=”text.jpg” width=”1″ height=”1″ />

<img src=”text2.jpg” width=”1″ height=”1″ />
</div>

CSS

div#vorladen {
display: none;
}

Diese 5 min Arbeit können sehr viel für die Webseite rausholen, vorallem dann wenn sie sehr Grafiklastig ist,
wie z.B. Webseiten von gaming Clans.

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.