Préchargement des images pour une meilleure expérience utilisateur

HTML & CSSEn testant l’intégration d’un nouveau design pour Empire Immo, je me suis retrouvé face à un petit soucis de chargement de mes images en rollover. En effet, lorsqu’on arrive pour la première fois sur la page, la navigation n’est pas des plus fluides car l’effet rollover prend du temps. Les images ne sont pas encore chargées et l’effet au passage de la sourie est donc très lent. Les images doivent d’abord être téléchargées par le navigateur et c’est cette latence réseau qui créé la lenteur de l’effet. Pour palier à cela, j’ai donc mis en place une technique de préchargement de mes images pour avoir des effets très fluides.

Après quelques recherches sur internet, je trouve plusieurs techniques de préchargement des images : via un chargement JavaScript ou alors CSS. Étant donné que mes rollover sont fait en CSS, il me parait plus logique de précharger mes images en CSS afin de les avoir en cache. C’est également plus simple à mettre en place. La technique est très simple, il suffit que je créé un élément DIV qui a en background l’image que je souhaite précharger et de le rendre invisible pour l’utilisateur.

Voici un exemple de code HTML :

<div id="preload-01"></div>

Avec le CSS associé :

#preload-01 { width: 0px; height: 0px;background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

Et toi, comment aurais-tu fait ?

Source : http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *