Grafiken: Reihenfolge des Bildaufbaus bestimmen

Hallo,

ich möchte bei einer Website eine etwas aufwändige GIF-Animation in die Überschrift einbauen. Zur Sicherheit lege ich ein Standbild der Animation darunter.

Wie kann ich bewirken, daß der öffnende Browser zuerst das darunterliegende Standbild lädt und dann erst versucht, daß größere GIF zu laden? Ich möchte erreichen, daß bei dünnerer Netzleitung oder langsamem Rechner mindestens schon mal das Standbild sichtbar wird, und die Fläche nicht bis zuletzt leer bleibt.

Vielen Dank und einen guten Rutsch
Hanno

Hallo Hanno,

Wie kann ich bewirken, daß der öffnende Browser zuerst das
darunterliegende Standbild lädt und dann erst versucht, daß
größere GIF zu laden? Ich möchte erreichen, daß bei dünnerer
Netzleitung oder langsamem Rechner mindestens schon mal das
Standbild sichtbar wird, und die Fläche nicht bis zuletzt leer
bleibt.

Gibts mehrere Möglichkeiten,

  1. mit Javascript (zuerst das Standbild per normalem
    HTML img-Tag laden und dann im Javascript das größere
    Bild nachladen)

  2. imt dem img lowsrc="" -Tag, dies klappt aber nicht immer
    (siehe z.B. http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html)

  3. indem Du ein CSS-Hintergrundbild für das img-Element angibst,
    also etwa so …Beispiel: http://asymmetric.pytalhost.org/test003.html

Grüße

CMБ

Hallo Hanno,

Wie kann ich bewirken, daß der öffnende Browser zuerst das
darunterliegende Standbild lädt und dann erst versucht, daß
größere GIF zu laden? Ich möchte erreichen, daß bei dünnerer
Netzleitung oder langsamem Rechner mindestens schon mal das
Standbild sichtbar wird, und die Fläche nicht bis zuletzt leer
bleibt.

… indem du es in deinem Quellcode vor den anderen Bildern einbindest. Wenn einige deine Bilder als Hintergrundbilder indirekt über eine externe CSS-Datei geladen werden, andere als IMG-Elemente direkt im HTML-Dokument (im Vordergrund), kannst du es so aber kaum steuern.

Du weißt ja auch nicht, wie weit der Browser mit dem Einlesen etwa der externen CSS-Datei schon ist, wieviele Requests gleichzeitig zu bearbeiten der Nutzer seinem Browser gestattet, wie viele Requests der Browser daher beim Einlesen der unterschiedlichen Dateien unterwegs noch abgesondert hat und überhaupt wie lange er je nach Dateigröße und Verbindungsqualität mit dem Laden der diversen Dateien beschäftigt ist, ob einige möglicherweise gar nicht mehr geladen werden müssen, weil sie aus dem Cache kommen usw. usf.

Ziemlich präzise könntest du es mit Javascript steuern, wenn du das Laden eines Bildes vom onLoad-Event eines vorherigen Bildes abhängig machst. Dazu würdest du die Bildquelle des nächsten Bildes jeweils erst dynamisch über Javscript referenzieren, wenn das letzte vollständig geladen ist.

Aber dann gäbe es ohne Javascript gar keine Bilder oder gerade mal eines auf deiner Seite. Es handelt sich dabei also um keine ernsthaft zu erwägende Alternative.

Gruß Gernot