Ich habe folgendes Problem: In einer Bildergalerie werden die Vorschaubilder in einer Art Matrix dargestellt. Es sind so z.B. 45 Bilder auf einer Seite. Die Matrix besteht aus keiner Tabelle sondern aus a-Tags und div-Tags, in denen dann jeweils ein dimensionierter (Höhe, Breite) img-Tag ist. Beim erstmaligen Laden der Galerie (bzw. einer Seite dieser Galerie) kommt es zu einem Effekt: Die Bilder tauchen ihrer Reihenfolge im Quellcode entsprechend auf. Wenn die Bilder im Browsercache sind, passiert das nicht.
Meine Frage ist: wie kann man das verhindern? Wann werden die Bilder vom Browser geladen? Beim Aufbau der Seite? Oder nachdem das HTML steht?
Übrigens: Diesen Effekt beobachte ich bei mir, wenn ich diese Matrix per AJAX nachlade. Allerdings liegt es definitiv nicht daran, dass die Inhalte nachträglich modifiziert werden. Ich sehe nämlich die Rahmen der Bild-Objekte, nur die eigentlichen Bilder werden erst allmählich geladen. Beim AJAX-Laden der Matrix passiert Folgendes: Der alte Inhalt wird ausgeblendet (60 ms), dann wird die Matrix anstelle des alten Inhalts eingefügt, dann wird die Matrix eingeblendet (60 ms). Scheinbar lädt der Browser aber die Bilder nicht, solange sie ausgeblendet sind.
Kann man so ein Verhalten beeinflussen? Oder muss man damit leben, dass die 45 Bilder nacheinander geladen werden, solange sie nicht im Cache sind? Was mich noch interessieren würde: Gibt es im Netz gute Beispiele oder Performance-Tests, wo ich sehen kann, was passiert wenn viele Bilder gleichzeitig geladen werden sollen?
Alternativ kannst du die Einzelbilder auch zu einem Bild zusammenfassen. Im Anschluss kannst du mittels Background-Position (CSS) die einzelenen Bildausschnitte den einzelnen deiner 45 Darstellungsbereichen zuteilen:
Jedes Bild stellt ein GET Request dar und je nach Browsertyp und Einstellung können mehr oder weniger Requests gleichzeitg zu einem Server gesendet werden (Bei Firefox sind es defaultmäßig 15). Das Verhalten wird noch unter anderem vom Server, keep-alive und pipelining beeinflusst, so dass Dir niemand garantieren kann dass die Bilder gleichzeitig zum Browser kommen. Rein theoretisch wäre es auch möglich das die TCP Pakete bei einem Reqest eine ganz andere Route nehmen. Ich gehe davon aus dass für Dich eher der visueller Effekt alles gleichzeitig darzustellen wichtiger ist. Ich würde einfach ein DIV drüberlegen das genau so groß ist wie das Gesamtbild und da eine freundliche Meldung, Grafik, etc. einblenden mit dem Hinweis "Bitte warten, bild wird geladen". Wenn die Seite komplett geladen ist würde ich dieses DIV dann ausblenden.