Chargement d'images et :hover - Session 1

Introduction

En matière de "rollover", pendant très longtemps le JavaScript a été utilisé comme la seule alternative.
Le "rollover" consisteà modifier une image au survol de celle-ci par une autre image.
En dehors du fait de devoir utiliser un script JavaScript pour ce genre d'effet, il fallait aussi penser à précharger les images. Ce qui obligait aussi l'utilisation d'un autre script JavaScript pour précharger ces images.

Puis est venu l'ère du CSS. avec un changement d'image en utilisant l'attribut ':hover'.
Mais il nous reste toujours le problème du préchargement d'images.
Celà entraine une sorte de 'lag' lors du survol d'un lien avec image, qui suivant la taille de l'image, perd tout sens décoratif ou utile.
Il est vrai qu'une fois les images survolées sont chargées dans le cache du navigateur, ce 'lag' n'existe quasiement plus.
Mais il n'en demeure pas moins d'autres problèmes liés : nombre de requêtes vers le serveur, nombre d'images etc ..

Nous allons voir ici comment optimiser à la fois les problèmes de survol et préchargement, mais également l'optimisation dans la gestion des images et des requêtes à effectuer vers un serveur

Mise en place

Ici différents cas de figure:

Iconification d'un titre

Iconification de mots

Liens survolés

Pour certains vous constaterez qu'il y a une latence à l'affichage de la seconde images pour les liens survolés.
Celà dépend de plusieurs facteurs dont principalement la bande passante du serveur hébergeant les images et votre bande passante.

Session 2