Optimierung: Hilfe beim dynamisches Laden der Hintergrundbilder

[Lydia Inayat]

Hallo,

Danke für die schnelle Antwort. J a ich hab die Hover Bilder drin, weil ich gleich eine Lösung anbieten wollte, wenn der User kein JavaScript aktiviert hat. Der würde dann ja nichts sehen, ausser den Teppich an sich.

Dachte das <figure> Element ist ganz schlau gewählt, für die Bilder. das <p> Tag ist dann quasi der Bildtitel. Nicht gut? Muss ja auch gleich ein bisschen an SEO denken.

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