Chargement asynchrone d'images en javascript

Comment utiliser le lazy load d'images pour améliorer la rapidité de votre site ?

10 mai 2014

Les images comptent parmi les ressources les plus lourdes qu'un navigateur doit charger et ralentissent considérablement l'affichage d'un site. Ce tutoriel a pour but d'expliquer comment éviter de charger inutilement des images sur vos pages web. Nous considérerons que les balises img sont présentes dans le DOM, nous ne traiterons pas ici de la création des balises img après un appel AJAX nécessaire pour mettre en place une grande galerie d'images.

Unveil.js est un plugin JQuery / Zepto de 45 lignes de code qui se base sur des balises images (img) déjà intégrées au DOM. La seule différence avec d'habitude c'est que l'attribut source (src) ne contient pas la véritable image mais : une version plus légère, un gif de chargement, une image de 1 pixel etc... Le lien vers la grosse image est contenu dans l'attribut data-src. Une fois que le document a terminé de charger, unveil va simplement prendre le contenu de l'attribut data-src et le mettre dans l'attribut src. Ceci permet donc de ne charger les images qu'après tout le reste du document. De plus, unveil fait les choses bien car avant de faire le remplacement des attributs, il vérifie la position du scroll vertical et la hauteur de la fenêtre pour savoir si l'image est affichée à l'écran. Si ce n'est pas le cas, unveil attendra sagement que le visiteur scroll et ne chargera l'image qu'au bon moment.

Pour être valide W3C, une image doit forcément posséder un attribut src non vide. Sur les très grosses images vous pouvez mettre un gif de chargement mais sur les petites images je vous conseille plutôt la technique du pixel transparent. Afin d'éviter de devoir envoyer une requête HTTP seulement pour ramener un pixel, il vaut mieux sérialiser ce pixel en base64 :

Un pixel transparent en base64

<img alt="Base64 d'un pixel transparent" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" />

Maintenant voici un cas complet pour utiliser unveil.js :

Lazy load avec unveil.js

<img alt="Flux RSS" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="/img/rss.png"/>

/* Dans un fichier JS */
$(document).ready(function () {
    $("img").unveil();
});

Et oui, c'est tout ! Si vous ne voulez pas le déclencher sur toutes les images, vous pouvez utiliser une classe ou n'importe quel autre sélecteur javascript qui renvoie une liste d'éléments.

Vous verrez dans la documentation qu'unveil permet d'afficher des images de très haute résolution en remplaçant data-src par data-src-retina. Le plugin gère aussi les fonctions de callback lors du déclenchement de l'évènement d'affichage ou encore un seuil de déclenchement en fonction de la position du scroll.

Pour voir une démonstration, sachez que les images du header et du footer d'informatix.fr utilisent unveil. Allumez une console Chrome / Firebug et rechargez cette page. Les images du header seront téléchargées directement après le contenu synchrone. En naviguant vers le bas de la page vous verrez se charger magiquement les images du footer.

Si vous souhaitez prendre en compte les clients sans javascript, vous pouvez utiliser une image dans une balise noscript :

Fallback pour les navigateurs sans javascript

<img alt="Flux RSS" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="/img/rss.png"/>

<noscript>
        <img alt="Flux RSS" src="/img/rss.png"/>
</noscript>

Si Unveil ne vous convient pas, vous trouverez peut-être votre bonheur dans les nombreuses autres solutions du même style. L'une des plus reconnues : Lazy Load Plugin for jQuery. Vous pouvez aussi le refaire vous même, en regardant le code de unveil vous verrez que ce n'est pas très compliqué.

A bientôt !

Par
Créateur et administrateur.

Dans la même catégorie

Ecrire une extension pour Google Chrome
JSONP : envoyer des requêtes cross-domains
Le principe de l'AJAX
Mise en place d'un calendrier comprenant date et heure.
Utiliser l'objet Date de javascript pour effectuer des calculs sur les dates
Apparition d'une fenetre de saisie avec jquery.

Commentaire(s)