article(s) dans votre panier VOIR

Le lazy loading avec HTML5 et CSS3

  • Vidéo 8 sur 32
  • 4h15 de formation
  • 32 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Le lazy loading
00:00 / 06:35
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tuto HTML 5 et CSS 3, Thierry Audroux travaille la page pour que les éléments placés en dehors de la zone visible ne se chargent qu'aux moments où ils apparaitront à l'écran. Cette technologie est appelée le lazy loading et permet entre autres un gain appréciable de bande passante, car seul les éléments visible sont chargés. En l'occurrence, ici, nous allons travailler avec des images relativement volumineuses, qui ne seront pas chargées tant qu'elles ne seront pas visibles. Dans ce tuto, le formateur se sert d'une page de travail déjà initié où les différents liens, images, et mise en forme sont déjà configurés. La librairie jQuey est également déjà incorporée et les images ne comportent pas d'attribut « src ». Si vous ouvrez la page dans un navigateur, il ne se passe rien, les images n'apparaissent pas tout simplement parce qu'elles ne comportent pas d'attributs comme on vient de le voir. Cette idée de ne pas insérer d'attributs « src », c'est globalement le cœur de la technique de lazy loading car si nous avions insérer cet attribut, toutes les pages se seraient chargées. Pour pouvoir effectuer ce type d'action, il faut charger une librairie nommée « lazy load ». Une fois la librairie téléchargée sur le site internet dédié, il vous suffit d'ajouter au niveau des images l'attribut « data-», c'est ainsi que va fonctionner la librairie lazy load.