# verlok/lazyload

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/verlok-lazyload).**

7,852 stars · 675 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/verlok/lazyload
- Homepage: https://www.andreaverlicchi.eu/vanilla-lazyload/
- awesome-repositories: https://awesome-repositories.com/repository/verlok-lazyload.md

## Description

This project is a vanilla JavaScript library and web performance optimizer designed to defer the loading of images, videos, and iframes until they enter the browser viewport. It acts as an intersection observer wrapper and adaptive media loader to reduce initial page load times and save bandwidth.

The library distinguishes itself by supporting responsive images via srcset and picture tags, as well as CSS background images and animated SVGs. It integrates with native browser loading attributes where available while providing custom fallbacks for unsupported environments. It can also trigger the execution of specific JavaScript functions based on element visibility.

Broad capabilities include frontend asset management with support for custom scroll container targeting and dynamic content observation for asynchronously injected elements. The utility also manages network reliability through asset loading error handling and cancels active downloads for elements that exit the viewport before completion.

## Tags

### Web Development

- [Initial Page Load Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations.md) — Reduces initial page load times by deferring the loading of images, videos, and iframes until they enter the viewport.
- [Frontend Asset Deferral Management](https://awesome-repositories.com/f/web-development/frontend-asset-deferral-management.md) — Manages how and when media assets and third-party embeds load to save bandwidth and improve responsiveness.
- [Intersection Observer Implementations](https://awesome-repositories.com/f/web-development/intersection-observer-implementations.md) — Uses the browser's native IntersectionObserver API to trigger asset loading when elements enter the viewport.
- [IntersectionObserver Media Loaders](https://awesome-repositories.com/f/web-development/intersectionobserver-media-loaders.md) — Handles responsive images, animated SVGs, and iframes using a mix of native loading and custom fallbacks.
- [Lazy Loading Libraries](https://awesome-repositories.com/f/web-development/lazy-loading-libraries.md) — Provides a vanilla JavaScript library to defer the loading of images, videos, and iframes until they enter the viewport.
- [Responsive Image Loaders](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/responsive-image-loaders.md) — Loads the most appropriate image source using picture tags and srcset attributes only when the element enters the viewport. ([source](https://github.com/verlok/lazyload#readme))
- [Media Lazy Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/media-lazy-loading.md) — Handles the lazy loading of complex image sets and picture tags across different device screen sizes.
- [Video Lazy Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/video-lazy-loading.md) — Defers the loading of video elements until they enter the viewport to optimize initial page speed. ([source](https://verlok.github.io/vanilla-lazyload/demos/video_autoplay.html))
- [Viewport-Based Asset Loading](https://awesome-repositories.com/f/web-development/viewport-based-asset-loading.md) — Delays loading of images, videos, iframes, and scripts until they enter the viewport to increase initial page speed. ([source](https://github.com/verlok/lazyload#readme))
- [Web Performance Optimization Tools](https://awesome-repositories.com/f/web-development/web-performance-optimization-tools.md) — Increases initial page speed by reducing the number of assets loaded during the first request.
- [Data Attribute Asset Deferral](https://awesome-repositories.com/f/web-development/data-attribute-asset-deferral.md) — Prevents initial page downloads by storing source URLs in custom data attributes until they are needed.
- [Dynamic Asset Observation](https://awesome-repositories.com/f/web-development/dynamic-content-loading/dynamic-asset-observation.md) — Updates visibility observers to automatically handle the lazy loading of assets within dynamically injected content. ([source](https://github.com/verlok/lazyload#readme))
- [Dynamic Element Observation](https://awesome-repositories.com/f/web-development/dynamic-content-loading/dynamic-element-observation.md) — Automatically detects and tracks new elements added to the DOM asynchronously to trigger lazy loading.
- [Loading Error Recovery](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/loading-error-recovery.md) — Handles loading failures for lazy-loaded assets by preventing broken images and retrying loads when connectivity returns. ([source](https://github.com/verlok/lazyload#readme))
- [Native Lazy Loading Polyfills](https://awesome-repositories.com/f/web-development/native-lazy-loading-polyfills.md) — Prioritizes native browser loading attributes while providing a JavaScript polyfill for unsupported environments.
- [Iframe Lazy Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/iframe-lazy-loading.md) — Delays the loading of embedded iframes until they enter the browser viewport to reduce initial load time. ([source](https://verlok.github.io/vanilla-lazyload/demos/iframes.html))

### User Interface & Experience

- [Viewport Action Triggers](https://awesome-repositories.com/f/user-interface-experience/action-trigger-components/viewport-action-triggers.md) — Triggers specific JavaScript functions or loading processes automatically when elements become visible.
- [CSS Background Image Deferral](https://awesome-repositories.com/f/user-interface-experience/css-background-image-deferral.md) — Delays the loading of CSS background images until they are visible to the user. ([source](https://github.com/verlok/lazyload#readme))
- [Custom Scroll Triggers](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/custom-scroll-triggers.md) — Detects visibility triggers within specific scrolling containers instead of only the global browser window. ([source](https://github.com/verlok/lazyload#readme))
- [Visibility Tracking](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/visibility-tracking.md) — Supports independent scrolling panels by binding visibility detection to specific overflow elements instead of the global window.
- [Visibility-Triggered Actions](https://awesome-repositories.com/f/user-interface-experience/viewport-managers/visibility-triggered-actions.md) — Automatically executes custom JavaScript functions when specific elements scroll into the user's view. ([source](https://github.com/verlok/lazyload#readme))

### Part of an Awesome List

- [Image Optimization](https://awesome-repositories.com/f/awesome-lists/devtools/image-optimization.md) — Lazy load images and iframes to improve initial page load.