| 

.NET C# Java Javascript Exception

2
Moin allerseits.

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?
13.05.2011
johny7
johny7
471 ● 1 ● 8
3 Antworten
1
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:

Das Bild:

-----------------------------------------------------------
|         | |         | |         | |         | |         |
| Bild  1 | | Bild  2 | | Bild  3 | | Bild  4 | | Bild  5 |
|         | |         | |         | |         | |         |
-----------------------------------------------------------
|         | |         | |         | |         | |         |
| Bild  6 | | Bild  7 | | Bild  8 | | Bild  9 | | Bild 10 |
|         | |         | |         | |         | |         |
-----------------------------------------------------------


Der HTML-Code:
<style>
  .bild{
    height:30px;
    weight:30px;
    background-image:url('mybild.png');
    background-repeat:no-repeat;
  }
</style>
<div id="layoutRow">
  <div id="Bild1" class="bild" style="background-position:0 0;"></div>
  <div id="Bild2" class="bild" style="background-position:30 0;"></div>
  <div id="Bild3" class="bild" style="background-position:60 0;"></div>
  <div id="Bild4" class="bild" style="background-position:90 0;"></div>
  <div id="Bild5" class="bild" style="background-position:120 0;"></div>
</div>
<div id="layoutRow">
  <div id="Bild6" class="bild" style="background-position:30 0;"></div>
  <div id="Bild7" class="bild" style="background-position:30 30;"></div>
  <div id="Bild8" class="bild" style="background-position:30 60;"></div>
  <div id="Bild9" class="bild" style="background-position:30 90;"></div>
  <div id="Bild10" class="bild" style="background-position:30 120;"></div>
</div>


Vorteile:
- der Browser braucht nur einen Get-Request um alle Bilder mit einem mal laden zu können und dadurch höhere Geschwindigkeit

Nachteile:
- das ganze funktioniert nur mit Bildern die die gleichen Höhen / Seiten-Verhältnisse haben (idealerweise sogar die gleichen größen).
13.05.2011
Floyd
Floyd
14,6k ● 3 ● 9
Editiert 13.05.2011
Floyd
Floyd
14,6k ● 3 ● 9
Meine Vorschaubilder sind alle quadratisch und gleich groß. Das wird wohl für mich die beste Lösung sein.
– johny7 16.05.2011
1
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.
13.05.2011
Jaksa
Jaksa
4,0k ● 2 ● 8
Daran habe ich auch gedacht
– johny7 16.05.2011
1
Die zweite Möglichkeit ist ein Preloader in Javascript zu schreiben.

Beispiele / Informationen:
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax
- Javascript preloader
- QueryLoader Demo page (jQuery)
13.05.2011
Floyd
Floyd
14,6k ● 3 ● 9
Danke für die Links, ich werde sie mir ansehen.
– johny7 16.05.2011

Stelle deine Javascript-Frage jetzt!