BrowserUX Lazy Img
Un Web Component moderne pour le chargement progressif et optimisé des images, basé sur l'API IntersectionObserver, l'attribut <img loading="lazy"> et un contrôle fin du rendu.
BrowserUX Lazy Images facilite la mise en place d'un système de chargement différé des images élégant, efficace et entièrement autonome.
Il combine les fonctionnalités natives du navigateur comme loading="lazy" avec l'API IntersectionObserver pour déclencher intelligemment le chargement des images dès qu'elles entrent dans le viewport.
npm install browserux-lazy-img
Web component
Voir le CHANGELOG
Fonctionnalités clés de BrowserUX Lazy Img
- 🔭 Chargement différé des images via IntersectionObserver
- 🎚 Trois modes de déclenchement :
auto,visibleou décalage en pixels - ⏳ Spinner SVG animé avec couleur configurable
- 🌅 Transition douce en fondu sur l'
opacityau chargement (0.4s) - ⚡ Détection des images en cache pour un affichage instantané
- 🖼 Fallback d'erreur avec interface "Image introuvable"
- 🎛 Spinner personnalisé via
slot name="loader" - 🔧 Icône de fallback personnalisée via
slot name="fallback" - 📐 Mise en page responsive avec aspect-ratio, sans décalage de mise en page
- 🎨 Exposition CSS via
::part():wrapper,ratio,img - 🧩 Shadow DOM optionnel, désactivable avec
no-shadow