6

Lazy Load – L’art du chargement paresseux avec Jquery

Bonjour les amis,

On parle plugin Jquery aujourd’hui et plus particulièrement Lazyload (Chargement paresseux en français). C’est pas tout jeune mais ça peut s’avérer très utile.

Le principe est le suivant :

« Pourquoi charger toutes les images du site alors que certaines, sans scroll, ne sont pas visibles immédiatement ? Bah oui tiens pourquoi ..? Chargeons uniquement les images directement visible et au scroll on charge le reste si besoin. »

Voilà qui résume bien la situation. On va gagner en temps de chargement, surtout sur les galeries d’images etc. Voyons comment mettre en place le système.

Il faut tout d’abord charger Jquery et le plugin :

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

Maintenant voyons la mise en place dans le code html :

<img class="lazy" src="img/load.png" data-original="img/MA_GRANDE_IMAGE.jpg" width="950" height="550">

On a donc une class, ici « lazy » commune à toutes nos images. La source de l’image est un petit pixel de la couleur de votre choix et enfin un attribut data-original qui est la vraie source de l’image.

Par la suite en déclenchant le plugin, dès que l’internaute scroll sur l’image, l’image originale est chargée depuis l’attribut data.

Et donc enfin pour finir voilà la ligne qui permets de déclencher le plugin sur toutes nos images ayant la class qu’on a choisi au préalable.

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

On viens de faire une mise en place basique, vous pouvez passer des paramètres au chargement du plugin pour avoir différents effets (fade etc.)

  • effect : « fadeIn »
  • container : « Div qui contient mes image #div »
  • failure_limit : 10
  • etc.

Bon développement à tous :) et excellente journée !

Le site du plugin c’est par ici !

La démo par là !

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.