Implémentation du Lazy Loading avec jQuery

Le lazy loading
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,5
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

Cette leçon montre comment mettre en œuvre le Lazy Loading pour optimiser le chargement des images en utilisant jQuery.

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.

Voir plus
Questions réponses
Pourquoi utiliser le Lazy Loading ?
Le Lazy Loading réduit la consommation de bande passante et améliore le temps de chargement des pages en chargeant uniquement les éléments visibles.
Quels attributs sont nécessaires pour le Lazy Loading avec jQuery Lazy Load ?
Les attributs nécessaires sont data-original pour l'adresse de l'image et l'ajout d'une classe lazy à chaque image.
Comment déclencher le chargement des images avec un clic ?
Pour déclencher le chargement des images avec un clic, on peut utiliser event et clic avec une méthode comme .lazyload() en jQuery.

Programme détaillé

2 commentaires
4,5
2 votes
5
4
3
2
1
Azraël
Il y a 2 ans
Bonne formation.
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.
lyazid.meaux
Il y a 4 ans
Très bonne formation, juste ce qu'il faut.
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.