AlpineJS : Implémenter le lazy loading des images avec le plugin Intersect

Mis à jour il y a 2 mois

Un tutoriel pour charger une image dès qu'elle entre dans le viewport en utilisant le plugin Intersect du framework AlpineJS.

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

HTML, JavaScript, Alpine.js

Sommaire

Introduction
Installer AlpineJS et Intersect
Implémenter le Lazy Loading

Voir aussi Un tutoriel sur l'utilisation du package laravel-dompdf dans un projet Laravel pour créer un fichier PDF à partir de code HTML ou d'une vue (template Blade). En savoir plus

🌎 La version anglaise de cette publication : AlpineJS: Implementing image lazy loading with the Intersect plugin

Introduction

AlpineJS est un framework JavaScript léger qui permet de rendre dynamique votre HTML.

Parmi les plugins fournis par AlpineJS, il y a Intersect, un wrapper pour l'API Intersection Observer de JavaScript. Ce plugin permet de réagir dès qu'un élément entre dans le viewport du navigateur.

Le viewport est la zone de la fenêtre dans laquelle le contenu web peut être vu, c'est-à-dire la partie visible de la page au niveau de la barre de défilement.

Dans ce tutoriel, nous allons voir la technique Lazy loading pour charger une image dès qu'elle entre dans le viewport du navigateur. Cela permet d'améliorer les performances d'une page web en réduisant son poids au chargement, car les images, qui peuvent être lourdes, sont chargées uniquement lorsqu'elles sont sur le point d'être visibles dans l'interface utilisateur.

Au moment de la rédaction de cette publication, j'utilise la version 3 d'AlpineJS et du plugin Intersect.

Installer AlpineJS et Intersect

Créons d'abord une structure HTML de base dans laquelle nous intégrerons AlpineJS et le plugin Intersect via CDN. Ensuite, nous ajouterons la logique du lazy loading des images en JavaScript. Un long texte Lorem Ipsum est inséré dans le paragraphe <p> pour remplir la page, avec une marge (margin-bottom) de 1000px en dessous. Cela permet de déplacer l’image hors du viewport et de la charger uniquement lorsqu’elle devient visible.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Lazy loading des images avec AlpineJS et Intersect</title>
</head>
<body>

	<h1>Bienvenue sur mon site</h1>

	<!-- Contenu long pour faire défiler la page -->
	<p style="margin-bottom: 1000px;" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat ...</p>

	<!-- L'image à charger -->
	<img src="https://loremflickr.com/320/240" alt="Image Lazyload" />

</body>
</html>

Installer via CDN

Nous pouvons inclure AlpineJS et le plugin Intersect dans une balise <script> avant la fermeture de la balise </body>. Assurez-vous d'ajouter le plugin avant le fichier principal d'AlpineJS.

<!-- Importation de Intersect via CDN -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

<!-- Importation de AlpineJs via CDN -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Installer via NPM

Pour installer AlpineJS et le plugin Intersect, utilisez les commandes suivantes :

npm install alpinejs
npm install @alpinejs/intersect

Une fois installés, nous pouvons les initialiser dans notre bundle.

import Alpine from 'alpinejs';
import intersect from '@alpinejs/intersect';

Alpine.plugin(intersect);
Alpine.start();

Implémenter le Lazy Loading

Une fois les bibliothèques importées, nous allons procéder comme suit pour ajouter la logique du lazy loading des images avec AlpineJS et Intersect :

1. Définir <body> comme un composant AlpineJS en lui attribuant x-data :

<body x-data>
...
</body>

2. Pour les images, utiliser une image légère (GIF ou SVG) dans l’attribut src pour indiquer le chargement, tout en stockant l’URL de l’image réelle dans data-src puis ajouter la directive x-intersect pour déclencher la fonction load_image dès que l’image entre dans le viewport :

<img x-intersect="load_image" data-src="https://loremflickr.com/320/240" src="./images/loader.gif" alt="Image Lazyload" />

Pour charger l'image uniquement la première fois qu'elle entre dans le viewport et non les fois suivantes, ajoutons le modificateur .once à x-intersect :

<img x-intersect.once="load_image" ... />

3. Définir la fonction load_image pour récupérer le chemin de l'image depuis data-src et mettre à jour l'attribut src :

function load_image() {
	
	// Récupère l'élément <img> concerné
	const image = this.$el;

	// Récupère le chemin de l'image depuis "data-src"
	const image_src = image.getAttribute("data-src");

	// Remplace l'attribut "src" par l'image réelle
	image.src = image_src;
	
}

Voici Le code source complet :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Lazy loading des images avec AlpineJS et Intersect</title>
</head>
<body x-data >

	<h1>Bienvenue sur mon site</h1>

	<!-- Contenu long pour faire défiler la page -->
	<p style="margin-bottom: 1000px;" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat ...</p>

	<!-- L'image à charger -->
	<img x-intersect.once="load_image" data-src="https://loremflickr.com/320/240" src="./images/loader.gif" alt="Image Lazyload" />

	<!-- Importation de Intersect via CDN -->
	<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

	<!-- Importation de AlpineJs via CDN -->
	<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

	<script>
		function load_image() {
			
			// Récupère l'élément <img> concerné
			const image = this.$el;

			// Récupère le chemin de l'image depuis "data-src"
			const image_src = image.getAttribute("data-src");

			// Remplace l'attribut "src" par l'image réelle
			image.src = image_src;
		
		}
	</script>
</body>
</html>

Je crois que cette astuce améliorera vos pages web en les rendant plus performantes grâce au lazyload des images.

Portez-vous bien ! 😎

#html #javascript #alpine.js

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil