lazyImg un script de Lazy loading d’images pour accélerer le chargement de ses pages

Sript de Lazy loading des images

Le lazy-loading est une technique qui consiste à ne charger des objets sur la page qu’au moment où ils sont visibles pour l’internaute. Cette technique permet d’accélérer le chargement des pages et d’économiser des ressources serveurs.

Cette technique est souvent utilisée pour ne charger les commentaires qu’au moment où l’internaute arrive à la fin de l’article. Il est en effet inutile d’aller interroger la base de données en sachant que peu de lecteur scroll jusqu’en bas de la page.

Je me suis basé sur un script Qazy existant afin de l’optimiser et qu’il réponde à toutes mes problématiques.

  • Fichier léger avec une taille de 2.58KB soit 20.64kb
  • Aucune dépendance avec une librairie (jQuery n’est pas utile), contrairement aux 90% des scripts déjà existants
  • Aucune modification du code HTML nécessaire
  • Script SEO friendly : l’attribut src est conservé pour Google

Utilisation

Le script est accessible ici sous le nom de lazyImg
Il faut charger le script le plus tôt possible car il bloque le chargement des images qui ne sont pas dans le viewport.

Fonctionnalité

Par défaut ce script, affichera un pixel 1 x 1 à la place des images. Il est possible via l’appel à la fonction setConfig de changer :

  • l’image
  • le custom offset. Par défaut, les images apparaissent un peu avant qu’elles soient dans le viewport, pour être exact 100px avant d’être visible. Si vous modifiez ce dernier à 400, les images se chargeront 400 pixels avant qu’elles ne soient visibles à l’écran.

<script> lazyImg.setConfig('img/loading.gif', 400); </script>

 

Vous avez aussi la possibilité de rajouter du css pour customiser l’image :

L’image affichée ressemblera à ceci :

 

Si vous rencontrez des soucis, des bugs n’hésitez pas à laisser un commentaire pour qu’on tente de corriger cela ensemble. Il en est de même si vous avez des suggestions d’améliorations.


Commenter

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