yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Ladebildschirm beim Bilderladen



Hat man ein großes Bild, so dauert es manchmal eine ganze Weile, bis es geladen ist. und der Benutzer weiß nicht genau, was nun passiert und wartet wahrscheinlich nicht, bis das Bild ausgeladen hat.

Um dies zu verhindern erstelle eine Grafik des Types gif. Es sollte genauso groß sein, wie das Foto selbst und einen einfarbigen Hintergrund haben. Schreibe nun in die Grafik an den unteren Rand eine Bemerkung wie "Foto wird geladen, warte kurz..." oder etwas ähnliches.
Nun ersetze das einfache <img>-Element des großen Fotos folgendes:

Code:
<table cellspacing="0" cellpadding="0" border="0">
<tr><td background="images/hintergrund.gif"><img src="images/foto.jpg" width="800" height="500" border="0" alt=""></td></tr>
</table>


Das Prinzip ist folgendes: Wir setzen die gif-Grafik als Hintergrund einer Tabelle. Da die gif-Grafik so klein ist, ist sie auch schnell geladen und der Besucher wird informiert. Nun lädt langsam das Foto da rüber und überdeckt die gif-Grafik. Einfach und doch effektiv.
Ersetze noch images/hintergrund.gif mit der Adresse zu deiner gif-Grafik, images/foto.jpg mit der Adresse zum großen Foto und width="800" height="500" durch die Höhe (height) und die Breite (width) des Fotos. Wenn du alles richtig gemacht hast, sollte es laufen!

Geschrieben von Phil Marx am 18.06.2004 (8624x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Schöne idee, aber es geht auch einfacher.
in etwa so:

<img src="bild.jpg" style="background-image:url('bild.gif');">

fertig ;-)
das lässt sich dann auch verallgemeinern in ne class oder direkt mit css so

img { background-image:url('bild.gif'); }

muss nicht im gif-format sein. weiß aber net, ob die animation abgespielt wird...
Geschrieben von guerda
Schöne idee, aber es geht auch einfacher.
in etwa so:

<img src="bild.jpg" style="background-image:url('bild.gif');">

fertig ;-)
das lässt sich dann auch verallgemeinern in ne class oder direkt mit css so

img { background-image:url('bild.gif'); }

muss nicht im gif-format sein. weiß aber net, ob die animation abgespielt wird...
Geschrieben von guerda