Utiliser IntersectionObserver
lorsque le navigateur affiche un bloc (div, paragraphe, image…) dans la partie visible du navigateur.
Une page web avec dix contenus d’une hauteur minimale de 101vh avec une image :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lazy</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="content content-0"> <img src="images/pink-flowers-7148990_640.jpg" alt="pink-flowers-7148990"> </div> <div class="content content-1"> <img src="images/purple-flowers-7148981_640.jpg" alt="purple-flowers-7148981"> </div> <div class="content content-2"> <img src="images/flower-7102916_640.jpg" alt="flower-7102916"> </div> <div class="content content-3"> <img src="images/flower-7127275_640.jpg" alt="flower-7127275"> </div> <div class="content content-4"> <img src="images/flower-7129881_640.jpg" alt="flower-7129881"> </div> <div class="content content-5"> <img src="images/flower-7155737_640.jpg" alt="flower-7155737"> </div> <div class="content content-6"> <img src="images/flower-7155758_640.jpg" alt="flower-7155758"> </div> <div class="content content-7"> <img src="images/insect-7132833_640.jpg" alt="insect-7132833"> </div> <div class="content content-8"> <img src="images/pink-flowers-7104299_640.jpg" alt="pink-flowers-7104299"> </div> <div class="content content-9"> <img src="images/pink-flowers-7148989_640.jpg" alt="pink-flowers-7148989"> </div> </div> <footer> <p>Photo by <a href="https://pixabay.com/fr/users/dendoktoor-14802912/" target="_blank">dendoktoor</a></p> </footer> <script src="app.js"></script> </body> </html>
Le minimum de CSS : la hauteur des contenus, une bordure rouge autour des images, et une translation de gauche vers la droite lorsque l’événement deviendra visible :
* { margin: 0; box-sizing: border-box; } body { font-family: Helvetica, Arial, Sans Serif; } .content { min-height: 101vh; background: #eeeeee; text-align: center; } .content:nth-child(2n+1) { background-color: #ddd; } img { max-width: 500px; transition: 2500ms; transform: translateX(-100vw); } .loaded img { border: 10px solid red; transition: 0; transform: translateX(0); }
Le bout de code JavaScript minimal. On « écoute » les .content
pour les passer à l’IntersectionObserver
. Lorsqu’il sont visible dans le navigateur, ils obtiennent la classe loaded
, lance la translation et affiche un message dans la console JavaScript. Quand les .content
ne sont plus visibles, ils retournent à leur état initial.
const content = document.querySelectorAll('.content'); function handleIntersection(entries) { entries.map((entry) => { if (entry.isIntersecting) { entry.target.classList.add('loaded') // Affiche le content visible dans la console console.log(entry.target); // observer.unobserve(entry.target); } else { entry.target.classList.remove('loaded') } }); } const observer = new IntersectionObserver(handleIntersection); content.forEach(image => observer.observe(image));