callmecavs/layzr.js
Layzr.js
layzr.js est une bibliothèque JavaScript de lazy loading d'images conçue pour améliorer la vitesse de chargement initiale des pages en retardant le téléchargement des images jusqu'à ce qu'elles entrent dans la fenêtre d'affichage (viewport) du navigateur. Elle fonctionne comme un sélecteur d'images responsive qui identifie la source d'image la plus appropriée en fonction de la prise en charge du navigateur et du ratio de pixels de l'appareil.
La bibliothèque utilise un système de livraison d'images responsive qui évalue les attributs de données pour sélectionner les sources optimales. Elle inclut un mécanisme de suivi de contenu dynamique, qui surveille le document pour les images nouvellement ajoutées afin de s'assurer qu'elles sont automatiquement ajoutées à la file d'attente de chargement.
Le projet fournit un suivi de visibilité via l'API Intersection Observer et inclut un utilitaire pour forcer des rafraîchissements manuels de la fenêtre d'affichage. Il dispose également d'un émetteur d'événements qui permet à une logique personnalisée de s'exécuter via des hooks de cycle de vie avant et après la mise à jour des sources d'images.
Features
- Image Lazy Loading - Provides a JavaScript library that defers image loading until elements enter the viewport to optimize page speed.
- Optimal Source Selection - Selects the best image source based on browser support, device pixel ratio, and data attributes.
- Dynamic Image Selectors - Evaluates device pixel ratio and browser support features to choose the most appropriate image source.
- Dynamic Element Observation - Detects and tracks new elements added to the DOM asynchronously to ensure they are added to the lazy loading queue.
- DOM Element Mutation Observers - Employs DOM mutation observers to automatically identify and track new images added to the document.
- Intersection Observer Implementations - Implements the IntersectionObserver API to detect element visibility within the viewport and trigger source updates.
- IntersectionObserver Media Loaders - Uses the IntersectionObserver API to automate the downloading of images as they enter the browser viewport.
- Responsive Image Loaders - Automatically selects the most appropriate image source based on viewport size and device capabilities.
- Initial Page Load Optimizations - Improves initial page load speed by deferring the download of images until they are visible to the user.
- Frontend Resource Management - Controls when and how images load to improve perceived speed and reduce unnecessary data usage.
- Source Selection Logic - Implements a system to select the optimal image URL by evaluating custom HTML attributes against device pixel ratios.
