Préchargement des images en Css

Pour améliorer la rapidité d’affichage des images et éviter certaines surprises, il est souvent utile  de précharger quelques images de présentation, galerie et sur les images de liens hover.

Grâce à une nouvelle classe que l’on charge sans l’afficher à l’écran, les images, fonds, etc, seront immédiatement disponible à l’affichage dès que l’utilisateur aura survoler le lien, cliquer sur la photo suivante…

En utilisant la propriété Display, il sera possible de demander au navigateur de charger l’image, tandis que son état « none » lui indiquera de ne pas l’afficher. Le navigateur téléchargera et la mettra en cache pour une utilisation ultérieure.

<style type="text/css">
.hiddenPic {display:none;}
</style>

 

C’est tout simple, il fallait y penser.