# verlok/vanilla-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-vanilla-lazyload).**

7,853 stars · 675 forks · JavaScript · MIT

## Links

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

## Topics

`hacktoberfest` `iframes` `images` `intersectionobserver` `lazy-loading` `lazy-sizes` `lazyload` `lazyload-iframes` `lazyload-images` `lazyload-script` `lazyload-videos` `picture` `picture-tag` `responsive-images` `srcset` `srcset-sizes` `vanilla-javascript` `vanilla-js` `videos` `webp`

## Description

vanilla-lazyload is a JavaScript lazy loading library and viewport-based asset loader designed to improve page load speed by deferring the loading of images, videos, iframes, and backgrounds. It functions as an intersection observer media loader that triggers resource downloads and script execution only when elements enter the browser viewport. The project also serves as a native lazy loading polyfill, utilizing native browser loading attributes where supported and providing a JavaScript fallback for older environments.

The library distinguishes itself through active bandwidth management, such as aborting the download of media elements that exit the viewport before they finish loading. It supports high-efficiency image formats like WebP and provides mechanisms for loading appropriate image resolutions responsively. Additionally, it handles dynamic content by updating its observers to detect and load new elements added to the document asynchronously.

The system covers a broad range of performance and recovery capabilities, including error handling for network failures and the ability to assign fallback images. It manages various loading states through an event callback system and supports the deferred initialization of complex UI components. Users can customize element selectors and manage multiple independent instances across different containers.

## 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.
- [Viewport-Based Asset Loaders](https://awesome-repositories.com/f/web-development/viewport-based-asset-loaders.md) — Implements a viewport-based asset loading system to defer resource downloads until elements become visible.
- [Resource Loading Triggers](https://awesome-repositories.com/f/web-development/element-attributes/configuration-attributes/resource-loading-triggers.md) — Implements resource loading by swapping placeholder attributes with original source values to trigger network requests.
- [IntersectionObserver Media Loaders](https://awesome-repositories.com/f/web-development/intersectionobserver-media-loaders.md) — Provides a performance tool using the IntersectionObserver API to trigger media downloads and script execution on visibility.
- [Lazy Loading Libraries](https://awesome-repositories.com/f/web-development/lazy-loading-libraries.md) — Provides a JavaScript library dedicated to deferring the loading of images, videos, iframes, and backgrounds.
- [Image Lazy Loading](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading.md) — Defers the loading of CSS background images until the corresponding element enters the viewport. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/demos/background_images_image-set.html))
- [Native Lazy Loading Polyfills](https://awesome-repositories.com/f/web-development/native-lazy-loading-polyfills.md) — Acts as a wrapper that uses browser native loading attributes where supported with a JavaScript fallback for older browsers.
- [Native Loading Polyfills](https://awesome-repositories.com/f/web-development/native-loading-polyfills.md) — Utilizes native browser loading attributes where supported and provides a JavaScript fallback for older environments.
- [Iframe Lazy Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/iframe-lazy-loading.md) — Postpones the loading of embedded iframes until they are visible to reduce initial page load time. ([source](https://verlok.github.io/vanilla-lazyload/demos/iframes.html))
- [Media Lazy Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/media-lazy-loading.md) — Postpones the loading of images, videos, iframes, and animated SVGs until they enter the viewport. ([source](https://github.com/verlok/vanilla-lazyload))
- [Video Lazy Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/video-lazy-loading.md) — Delays the loading of video elements until they are visible to the user to preserve bandwidth. ([source](https://verlok.github.io/vanilla-lazyload/demos/video.html))
- [Viewport-Based Asset Loading](https://awesome-repositories.com/f/web-development/viewport-based-asset-loading.md) — Manages the loading of media and scripts based on their visibility to the user using the IntersectionObserver API.
- [Dynamic Asset Observation](https://awesome-repositories.com/f/web-development/dynamic-content-loading/dynamic-asset-observation.md) — Updates visibility observers to handle and lazy load new elements added to a page asynchronously.
- [Dynamic Element Observation](https://awesome-repositories.com/f/web-development/dynamic-content-loading/dynamic-element-observation.md) — Updates internal observers to detect and lazy load new elements added to the document asynchronously. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/README.md))
- [Loading Error Recovery](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/loading-error-recovery.md) — Provides a callback system to assign fallback images when a lazy-loaded element fails to load. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/README.md))
- [Loading State Markers](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/loading-state-markers.md) — Uses CSS classes and callbacks to track and signal when lazy-loaded elements are loading, loaded, or failed. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/CHANGELOG.md))
- [Responsive Image Loaders](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/responsive-image-loaders.md) — Loads appropriate image resolutions and high-efficiency formats like WebP only when elements become visible.
- [Network Connectivity Retries](https://awesome-repositories.com/f/web-development/network-connectivity-retries.md) — Automatically attempts to reload media elements that failed due to temporary network connectivity loss. ([source](https://github.com/verlok/vanilla-lazyload))
- [Resource Download Cancellation](https://awesome-repositories.com/f/web-development/resource-download-cancellation.md) — Aborts the download of media elements that exit the viewport before they finish loading to optimize bandwidth. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/README.md))

### User Interface & Experience

- [Viewport Visibility Observers](https://awesome-repositories.com/f/user-interface-experience/viewport-visibility-observers.md) — Uses the IntersectionObserver API to track when elements enter the viewport to trigger resource loading.
- [Deferred UI Initialization](https://awesome-repositories.com/f/user-interface-experience/deferred-ui-initialization.md) — Delays the loading and setup of complex UI components until they enter the viewport to improve startup speed. ([source](https://verlok.github.io/vanilla-lazyload/demos/swiper.html))
- [DOM Element Re-scanning](https://awesome-repositories.com/f/user-interface-experience/dynamic-element-tracking/dom-element-re-scanning.md) — Updates visibility observers to handle and lazy load new elements added to a page asynchronously.
- [Visibility-Triggered Actions](https://awesome-repositories.com/f/user-interface-experience/viewport-managers/visibility-triggered-actions.md) — Triggers custom JavaScript functions when specific elements scroll into the user's view. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/README.md))

### Graphics & Multimedia

- [Viewport-Aware Bandwidth Optimization](https://awesome-repositories.com/f/graphics-multimedia/viewport-aware-bandwidth-optimization.md) — Saves data by canceling active downloads of media elements that exit the viewport before they finish loading.
- [WebP Fallback Polyfills](https://awesome-repositories.com/f/graphics-multimedia/webp-image-conversions/webp-fallback-polyfills.md) — Provides automatic WebP format delivery with fallbacks for browsers that do not support high-efficiency image types. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/CHANGELOG.md))

### Networking & Communication

- [Request Abort Controllers](https://awesome-repositories.com/f/networking-communication/request-abort-controllers.md) — Aborts active media downloads when elements exit the viewport to preserve bandwidth.

### Software Engineering & Architecture

- [Event-Driven Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks.md) — Provides an event-driven system to execute custom JavaScript functions at specific loading lifecycle stages.
- [Event Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/event-logging/event-callbacks.md) — Executes custom functions when elements enter the viewport, start loading, finish loading, or encounter errors. ([source](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html))