Lazy Load Intersection Observer

Utilisation de IntersectionObserver pour gérer le Lazy Load sur img picture iframe ou autres (à étendre si besoin).
Permet de charger les contenus dans le cas où le navigateur ne gère pas IntersectionObserver.
Ne pas oublier une petite balise noscript pour les navigateurs sans Javascript mais aussi pour le SEO.
Intersection Observer API sur MDN

Le script

Afficher / télécharger la source JS

La CSS

Afficher / télécharger la source CSS

Utilisation

Tout est dans le js... Exemple ici

Utilisation sur iframe Youtube
Utilisation sur une image
Ligula sed egestas integer purus
Utilisation sur picture
Maecenas amet mi
Utilisation en image de fond. Concernant le lazy load sur des images en background-image, il est nécessaire de disposer de plusieurs containers visibles selon le viewport.
Le rendu :
Le markup :
Exemple de CSS :
Utilisation des sources
Les sources de « Lazy Load Intersection Observer » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec
Droits réservés 2006-2021 Kortic - Anthony Ladeuil Dépôt ISSN 2610-1297
2021-01-21