BrowserUX Lazy Img : Démo
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.
Pour cette démo, toutes les images mettent en scène Akira, mon malinois husky. Un modèle parfait pour tester le chargement différé.
Avec load-trigger="0", le chargement de l'image commence dès qu'une partie de celle-ci entre dans le viewport. C'est le réglage le plus réactif, idéal pour les images proches du haut de la page qui doivent apparaître sans délai dès que l'utilisateur commence à faire défiler.
Avec load-trigger="visible", le chargement est différé jusqu'à ce que l'image soit entièrement visible dans le viewport. C'est le réglage recommandé pour les images sous la ligne de flottaison : il évite de charger du contenu que l'utilisateur n'atteindra peut-être jamais, économisant la bande passante tout en garantissant un affichage fluide.
L'attribut background remplit le placeholder de l'image pendant le chargement, évitant les décalages de mise en page. Combiné à loader-color et loader-delay, vous contrôlez entièrement l'interface de chargement ; le délai garantit que le spinner n'est affiché que lorsque le chargement prend un temps perceptible.
Lorsqu'une URL source est cassée ou inaccessible, le composant affiche automatiquement un indicateur de fallback par défaut. Aucun code supplémentaire n'est nécessaire, l'erreur est interceptée en interne et le fallback est injecté à la place de l'image manquante. L'exemple ci-dessous montre comment remplacer ce fallback par défaut par un fallback personnalisé.
Grâce au slot slot="fallback", vous pouvez fournir n'importe quel élément SVG ou HTML personnalisé pour remplacer l'indicateur d'image cassée par défaut. Cela vous permet d'adapter le design du fallback à l'identité visuelle de votre projet.
L'attribut responsive fait en sorte que le composant occupe toute la largeur de son parent tout en conservant le ratio d'aspect original défini par width et height. Cela élimine le cumulative layout shift (CLS) même avant que l'image ne soit chargée.
browserux-lazy-img est un Web Component sans dépendance. Intégrez-le dans n'importe quel projet, framework ou vanilla, et bénéficiez d'un chargement différé optimisé, d'une gestion des erreurs et de transitions en fondu fluides, prêts à l'emploi.
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