verlok/lazyload
Lazyload
Este proyecto es una biblioteca de JavaScript vainilla y optimizador de rendimiento web diseñado para diferir la carga de imágenes, videos e iframes hasta que entren en el viewport del navegador. Actúa como un wrapper de intersection observer y cargador de medios adaptativo para reducir los tiempos de carga inicial de la página y ahorrar ancho de banda.
La biblioteca se distingue por admitir imágenes responsivas mediante srcset y etiquetas picture, así como imágenes de fondo CSS y SVGs animados. Se integra con los atributos de carga nativos del navegador donde están disponibles, mientras proporciona fallbacks personalizados para entornos no compatibles. También puede activar la ejecución de funciones de JavaScript específicas basadas en la visibilidad del elemento.
Las capacidades amplias incluyen la gestión de activos frontend con soporte para el direccionamiento de contenedores de desplazamiento personalizados y la observación de contenido dinámico para elementos inyectados de forma asíncrona. La utilidad también gestiona la fiabilidad de la red mediante el manejo de errores de carga de activos y cancela las descargas activas para los elementos que salen del viewport antes de completarse.
Features
- Initial Page Load Optimizations - Reduces initial page load times by deferring the loading of images, videos, and iframes until they enter the viewport.
- Frontend Asset Deferral Management - Manages how and when media assets and third-party embeds load to save bandwidth and improve responsiveness.
- Intersection Observer Implementations - Uses the browser's native IntersectionObserver API to trigger asset loading when elements enter the viewport.
- IntersectionObserver Media Loaders - Handles responsive images, animated SVGs, and iframes using a mix of native loading and custom fallbacks.
- Lazy Loading Libraries - Provides a vanilla JavaScript library to defer the loading of images, videos, and iframes until they enter the viewport.
- Responsive Image Loaders - Loads the most appropriate image source using picture tags and srcset attributes only when the element enters the viewport.
- Media Lazy Loading - Handles the lazy loading of complex image sets and picture tags across different device screen sizes.
- Video Lazy Loading - Defers the loading of video elements until they enter the viewport to optimize initial page speed.
- Viewport-Based Asset Loading - Delays loading of images, videos, iframes, and scripts until they enter the viewport to increase initial page speed.
- Web Performance Optimization Tools - Increases initial page speed by reducing the number of assets loaded during the first request.
- Viewport Action Triggers - Triggers specific JavaScript functions or loading processes automatically when elements become visible.
- CSS Background Image Deferral - Delays the loading of CSS background images until they are visible to the user.
- Custom Scroll Triggers - Detects visibility triggers within specific scrolling containers instead of only the global browser window.
- Visibility Tracking - Supports independent scrolling panels by binding visibility detection to specific overflow elements instead of the global window.
- Visibility-Triggered Actions - Automatically executes custom JavaScript functions when specific elements scroll into the user's view.
- Data Attribute Asset Deferral - Prevents initial page downloads by storing source URLs in custom data attributes until they are needed.
- Dynamic Asset Observation - Updates visibility observers to automatically handle the lazy loading of assets within dynamically injected content.
- Dynamic Element Observation - Automatically detects and tracks new elements added to the DOM asynchronously to trigger lazy loading.
- Loading Error Recovery - Handles loading failures for lazy-loaded assets by preventing broken images and retrying loads when connectivity returns.
- Native Lazy Loading Polyfills - Prioritizes native browser loading attributes while providing a JavaScript polyfill for unsupported environments.
- Iframe Lazy Loading - Delays the loading of embedded iframes until they enter the browser viewport to reduce initial load time.
- Image Optimization - Lazy load images and iframes to improve initial page load.
