Ladehinweis für große Bilder

Scripting-Tipps - CSS


Mittels CSS ist es möglich, bei großen Bildern und Grafiken einen Ladehinweis anzeigen zu lassen. Ein solcher Hinweis ist immer dann sinnvoll, wenn wirklich große Bilddateien geladen werden, beispielsweise bei hochauflösenden Fotos.
Wie das funktioniert, erklärt dieser Artikel.

Ladehinweis bei großen Bildern anzeigen lassen

Damit ungeduldige oder unerfahrene Benutzer nicht sofort die Seite wieder verlassen (da sie ja offenbar nichts angezeigt bekommen), kann so eine kleine Hinweisgrafik angezeigt werden, die auf das Laden der großen Grafik aufmerksam macht.

Im Grunde genommen wird dabei eigentlich kein wirklicher Ladehinweis angezeigt. Mittels CSS wird lediglich einer Tabelle ein Hintergrundbild definiert. Dieses Hintergrundbild wird so lange angezeigt, bis das große Bild schlussendlich vollständig geladen ist, und somit das Hintergrundbild der Tabelle verdeckt. Und so funktioniert das ganze.


Beispiel:

<table cellPadding=0 cellSpacing=0
 style="background-image: url(ladehinweis.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: #FFFFFF;">
 <tr>
  <td><img src="hochaufloesendes_landschaftsfoto.png" width="1600" height="1200"></td>
 </tr>
</table>


Bevor nun das große Bild geladen wird, sieht der Besucher mit diesem Beispiel zuerst die Grafik "ladehinweis.png", die bedeutend kleiner sein sollte, damit sie auch sofort angezeigt wird. So kann sich der Besucher darauf einstellen, dass das Laden unter Umständen einen Moment dauern kann.



Weitere Artikel: