1. 🌿 En HTML natif (le plus simple du monde)
Depuis 2019, les navigateurs modernes supportent loading="lazy"… sans JavaScript.
<img src="photo-vacances.jpg" loading="lazy" alt="Plage au coucher du soleil">
<iframe src="https://maps.google.com/..." loading="lazy"></iframe>
✅ Avantage : 0 ligne de JS, 100 % efficace pour les images et iframes.
✅ Supporté par Chrome, Firefox, Edge, Safari.
💡 Astuce : utilise-le partout où tu as une image en dessous de la "fold" (ce qu’on voit sans scroller).
2. 🧠 Avec JavaScript : IntersectionObserver (pour plus de contrôle)
Parfois, tu veux faire plus malin : charger une bannière, un composant, ou une animation seulement quand l’utilisateur s’approche.
Voici comment :
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img); // On arrête une fois chargée
}
});
});
images.forEach(img => observer.observe(img));
Dans ton HTML :
<img data-src="image-lourde.jpg" alt="..." class="lazy">
🎯 Parfait pour les sites custom, ou si tu veux ajouter un effet de fondu pendant le chargement.
3. ⚛️ Dans les frameworks : React, Vue, Angular
Tu travailles avec un framework ? Le lazy loading est encore plus puissant.
🔹 React :
lazy() +
Suspense
import { lazy, Suspense } from 'react';
const ProfilUtilisateur = lazy(() => import('./ProfilUtilisateur'));
function App() {
return (
<Suspense fallback={<div>Chargement du profil...</div>}>
<ProfilUtilisateur />
</Suspense>
);
}
✅ Idéal pour les routes ou composants lourds (ex : tableau de bord, éditeur de texte).
🔹 Vue :
defineAsyncComponent
import { defineAsyncComponent } from 'vue';
const MonComposant = defineAsyncComponent(() => import('./MonComposant.vue'));
export default {
components: { MonComposant }
}
🔹 Angular : Routes en lazy loading
Dans ton routeur :
{ path: 'profil', loadChildren: () => import('./profil/profil.module').then(m => m.ProfilModule) }
🎯 Tu gagnes des secondes de chargement en divisant ton app en "morceaux".
Ahmed Oumezzine
