seitdem ich den Effekt mal bei einer Seite gesehen habe, suche ich ewig nach einer Lösung diesen auch auf meiner Seite einbauen zu können.
Ich stell mir das ganze so vor:
Wenn die Seite geladen wird, sollen alle Bilder, die noch nicht im Cache des Besuchers sind, durch ein Ladebild ersetzt werden.
Da ich viele und auch große Bilder auf der Webseite anzeige dauert das Laden teilweise ewig.
Zwar hab ich auch schon auf thumbnails umgebaut, aber das Laden dauert trotzdem noch lange und ich möchte nicht, dass überall leere Border auf der Seite zu sehen sind.
Ich hoffe ihr versteht, was ich meine.
Ich habe schon viele JavaScript-Lösungen gefunden, die das Bild in den Cache laden, das will ich aber nicht, da mir der Effekt mit dem “Ladebild” gefällt.
Und da ich mich NULL mit JavaScript auskenne bin ich auch schon so gut wie am verzweifeln.
mikebeblack - das ist aber kein (X)HTML, kann man in dem
Zusammenhang also vergessen.
Vorschaubilder in geringerer Auflösung wären allenfalls im
Bild selbst unterzubringen, sofern das Format das hergibt.
Ansonsten notiert man die Abmessungen des jeweiligen Bildes
jeweils im img-Element, dann stört es ja nicht weiter, wenn das
Bild etwas länger braucht - der Wert des alt-Attributes dient
ja auch als Alternative, das sollte dann reichen ;o)
Mit Hintergrund würde es gehen, aber display:inline-block nicht vergessen
<style type="text/css">
img.load {
background:transparent url(loading.gif) no-repeat scroll center center;
display:inline-block;
}
</style>
<img class="load" width="200" height="200" alt="ein großes bild" src="bild.jpg"/>
Bei transparenten Bildern kann das jedoch Probleme geben, da dann das Ladebild durchscheint.
Dann kann man das Ersatzbild ja auch per Pseudoprotokoll
direkt in die CSS-Datei schreiben, dann erfordert es nicht einen
weiteren Ladeschritt, der Zeit kostet, so oder so wäre dann aber
immer noch abzuwarten, bis das CSS interpretiert wird, was auch
von Ladezeiten abhängen kann, die man nicht direkt beeinflussen
kann.
Ah ok, also das mit den vordefinierten heights und widths, das hab ich ja
und der alt-text is ja auch da, aber ich find das n bissel langweilig, wenn da nur belibieg viele leere kästen mit schrift drinn rumstehn …
Die Idee mit dem Hintergrund werd ich gleichmal austesten
Dürfte aber soweit funktionieren, da die Bilder ja eh alle in einer Liste stehen und die liste mit display:inline-block vordefiniert ist …
DANKE für eure Hilfe xD
Zwar kein Javascript, aber wenn es OHNE auch geht … xD