LazyLoad, le chargement dynamique d'images

Qu'est-ce que c'est?

Le LazyLoad (littéralement « le chargement fainéant ») est une méthode de chargement d'images de plus en plus utilisé sur le web, notamment sur les sites à fort trafic.

Le principe du LazyLoad est de charger les images au fur et à mesure de la navigation au sein d'une page web.
Sur la plupart des sites, les pages sont plus grandes que le navigateur, on ne peux pas voir directement les images en bas de page. Certaines autres images sont volontairement cachées (sur les éléments qui défilent par exemple). Le LazyLoad va différer le chargement de ces images invisibles afin de pouvoir charger un premier rendu de la page plus rapidement.

De nombreux modules de LazyLoad existent déjà et sont téléchargeables gratuitement :

 

Fonctionnement du LazyLoad

Le module de LazyLoad se présente généralement sous la forme de fichiers Javascript à intégrer directement dans le header de votre site.

Cette méthode oblige à changer la structure de vos balises images. Vous devez supprimer l'attribut source, et le remplacer par un attribut défini par le module utilisé (souvent data-src ou data-original). Vous devrez également lui spécifier une classe précise pour que le lazyload reconnaisse les images à différer.

Ces modifications vont empêcher les images de se charger à l'arrivée du visiteur sur la page, l'attribut source étant absent. Lorsque vous vous naviguerez dans la page, le lazyload va constamment observer vos actions. Lorsque vous accéderez à une partie de la page contenant une image non chargée, le lazyload va instantanément l'identifier, la récupérer et l'afficher.
L'internaute ne verra aucune différence, mis à part un accès plus rapide aux pages du sites.

Dans la pratique, on peut facilement économiser plusieurs centaines de millisecondes au chargement d'une page, surtout si le site possède beaucoup d'image (comme les sites d'actualités par exemple).

 

Limites du LazyLoad

Le Lazyload se fait en JavaScript. L'internaute ne doit pas avoir désactivé cette fonctionnalité pour que le plugin fonctionne. Dans le cas contraire, il ne pourra pas voir les images normalement "Lazyloadées".

Sur les connexions lentes voire très lentes, l'internaute pourra avoir un décalage entre le moment ou il accède à l'encart de l'image, et le moment ou elle est chargée par le Lazyload. On observera également ce phénomène sur les machines très ancienne, ne pouvant pas recalculer la page assez rapidement. Dans ce cas, il verra une image manquante ou « cassée » pendant un bref instant.

Pour la compatibilité, les plug-ins sont généralement adaptés à tous les navigateurs. Il n'y aura pas d'adaptation à faire pour certains navigateurs, quelque soit leur version.

Posté dans Web par Mathieu le 21 Janvier 2013

Ajouter un commentaire

CONTACT

MMDev est située à St Laurent de Chamousset dans les monts du Lyonnais à 40 km de Lyon (Rhône 69) et à 45 Km de Saint Etienne (Loire 42).

Adresse
La Bâtie
69930 Saint Laurent de Chamousset