Introduction au Lazy Loading
Objectifs
Les objectifs de cette vidéo sont de permettre aux apprenants de comprendre et d'implémenter le Lazy Loading sur une page web en utilisant jQuery et de réduire le temps de chargement des pages pour une meilleure expérience utilisateur.
Résumé
Cette leçon montre comment mettre en œuvre le Lazy Loading pour optimiser le chargement des images en utilisant jQuery.
Description
Dans cette leçon détaillée, nous allons apprendre à utiliser la technique du Lazy Loading pour améliorer les performances de nos pages web. Le Lazy Loading permet de charger des éléments seulement lorsqu'ils deviennent visibles à l'écran, ce qui réduit la consommation de bande passante et améliore la réactivité du site. Nous commencerons par une page de base contenant quelques images sans attribut src
, expliquant ainsi le mécanisme pour éviter le chargement initial des fichiers. Ensuite, nous intégrerons la bibliothèque jQuery et le plugin jQuery Lazy Load. Nous procéderons étape par étape pour ajouter les attributs nécessaires tels que data-original
et une classe spéciale lazy
. Finalement, nous verrons comment déclencher le chargement des images automatiquement ou via des événements comme le click
tout en ajoutant des effets visuels comme le fade-in
.
Questions fréquentes
data-original
pour l'adresse de l'image et l'ajout d'une classe lazy
à chaque image.
event
et clic
avec une méthode comme .lazyload()
en jQuery.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.
Merci.