Optimierung: Hilfe beim dynamisches Laden der Hintergrundbilder

[Rolf b]

Schluck (macht der Browser :) )

Ich würde grundsätzlich mal im HTML nur den small-Bereich rendern. Dann kannst Du Dich mit .hover auf ein "Maus schwebt drüber" registrieren und in diesem Event Handler das große Bild dynamisch laden. Zum Beispiel so, dass Du in dieser einen Zelle ein position:absolute Element hinzufügst, das das <img> Tag für das große Bild enthält. Ich meine, dass der Browser das Bild dann nachladen müsste. .hover() bietet zwei Eventhandler - einer wenn der Hover beginnt und einer wenn der Hover endet, und im Ende-Handler kannst Du das große Bild wieder entfernen.

Wird über einem kleinen Bild mehrfach gehovert, sollte der Browsercache dafür sorgen, dass das große Bild nur einmal geladen wird.

Natürlich hast Du dann einen Moment Verzögerung zwischen "Maus betritt Bild" und "Großes Bild ist da". Das kannst Du durch ein animiertes GIF kaschieren (rotierende Punkte oder sowas), und durch ein Aufzoomen des großen Fensters per jQuery Animation - oder was auch immer du gern machen willst.

Ob es eine extraschlaue Lösung gibt, durch Kombination von CSS :hover, :after und attr() weiß ich nicht, dazu müsste ich eine Weile frikkeln.

Nebenbei: Warum hast Du das <figure> Element drin? Es ist ja keine Abbildung im Fließtext. Braucht unveil das? Ansonsten würde ich vermuten, dass es unnötig ist.

Gruß
Rolf