Lazy Load : comment réduire le temps de chargement de votre site

Vous êtes confrontés à des problèmes de performance sur votre site internet ? Lazy Load pourrait vous intéresser. C’est un plugin jQuery qui permettra à votre site d’optimiser le chargement des images.
On pourrait se demander s’il est nécessaire, pendant le chargement d’une page, de charger aussi toutes les images de cette dernière. En effet, il serait plus judicieux de ne charger que les images qui peuvent être visibles pour l’utilisateur, donc une fois qu’il aura scrollé dessus par exemple. C’est ce que Lazy Load vous permettra de réaliser.

Voici une démonstration de ce plugin :

Remarquez que malgré le nombre et la taille des images, la page se charge très rapidement.
C’est autour de ce plugin que nous allons construire notre petit tutoriel mais il en existe d’autres dans ce style tels que jQuery Lazy Image Loader ou encore BttrLazyLoading.

Installation

Il vous suffit de charger jQuery et jquery.lazyload.js (Lazy Load) dans votre fichier HTML :

<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.lazy.min.js"></script>

Utilisation

L’utilisation de ce plugin est assez simple.

Le code HTML

Premièrement, du côté des images, dans le code HTML, voici ce que nous avons :

<img class="lazy" src="img/loader.gif" data-original="img/image-a-afficher.jpg" alt="Image" width="500" height="300"/>

Dans ce bout de code, nous pouvons voir que 2 images sont appelées grâce aux attributs :

• src : contient le GIF du loader qui va être chargé en même temps que la page
• data-original : attribut géré par le plugin. Il contient l’image à afficher qui va être chargée après le chargement de la page, une fois que l’utilisateur aura scrollé dessus

Même si vous ne voulez pas afficher de loader, je vous conseille de mettre quand même un attribut src à vos images afin de garder votre code valide W3C :

<img class="lazy" src="#" data-original="img/image-a-afficher.jpg" alt="Image" width="500" height="300"/>

Le code JavaScript

Du côté du code JavaScript, une seule ligne suffit :

$("img.lazy").lazyload();

Comme vous pouvez le voir, il vous suffit de sélectionner toutes vos images avec la class que vous aurez prédéfinie (ici lazy) et de l’instancier avec le plugin Lazy Load.

Les principales fonctionnalités

Différentes options vous sont proposées en plus de l’utilisation basique de ce plugin.

Le threshold

Par défaut, les images n’apparaissent qu’une fois visibles à l’écran. Pour modifier cela, il faut augmenter l’attribut threshold qui équivaut par défaut à 0. Si vous modifier ce dernier à 400, les images se chargeront 400 pixels avant qu’elle ne soient visibles à l’écran :

$("img.lazy").lazyload({
	threshold : 400
});

Les événements déclencheurs

Par défaut, c’est au scroll de l’utilisateur et seulement quand elle est visible à l’écran qu’une image se charge. Mais il est possible de déclencher son chargement avec d’autres événements tels que les événements jQuery (mousedown, mouseover, click) ou encore des événements personnalisés :

$("img.lazy").lazyload({
	event : "mouseover"
});

Les effets

Par défaut, le plugin utilise la méthode show() de jQuery pour afficher les images mais il est possible d’ajouter un effet :

$("img.lazy").lazyload({
	effect : "fadeIn" // ou encore effect : "slideDown"
});

Les conteneurs

Ce plugin fonctionne aussi si votre image se trouve dans un conteneur scrollable autre que la page en elle-même. Pour permettre cela, il faut indiquer au plugin le conteneur de l’image en question :

$("img.lazy").lazyload({
	container: $("#container-scrollable")
});

Et comment afficher mes images si le JavaScript n’est pas activé sur le navigateur de l’utilisateur ?

Si le JavaScript est désactivé dans le navigateur de l’utilisateur, il est tout de même important de pouvoir afficher les images. Pour cela, il faut entourer vos images de la balise <noscript></noscript> :

<img class="lazy" src="img/loader.gif" data-original="img/image-a-afficher.jpg" alt="Image" width="500" height="300" />
<noscript>
	<img src="img/image-a-afficher.jpg" alt="Image" />
</noscript>