Optimierung: Hilfe beim dynamisches Laden der Hintergrundbilder
bearbeitet von 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.
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_