tuupola/lazyload
Lazyload
Lazyload is a JavaScript plugin that defers the loading of images until they scroll into the viewport, using the browser's Intersection Observer API to detect visibility. It is designed to speed up initial page load and save bandwidth by delaying off-screen images, and includes a jQuery-compatible wrapper for drop-in integration with existing jQuery code.
The plugin distinguishes itself through support for responsive images, loading different sources based on screen size, and a blur-up placeholder effect that shows a low-resolution image that transitions into the sharp version once fully loaded. It also provides instance lifecycle management, allowing developers to create, destroy, or force-load all images, and supports inline placeholders as data URIs to reduce network requests.
Additional capabilities include event-driven loading triggers on scroll, resize, or orientation changes, and the ability to load and destroy the instance in a single operation. The plugin is configured through custom data attributes that specify image source URLs, keeping the standard src attribute empty to prevent early loading.
Features
- Image Lazy Loading - Delays the loading of off-screen images until they scroll into the viewport to speed up initial page load and save bandwidth.
- Intersection Observer Image Loaders - Uses the Intersection Observer API to detect when images enter the viewport and trigger loading.
- Responsive Image Loaders - Loads different image sources based on screen size using a set of alternative URLs.
- Viewport Observers - Uses the Intersection Observer API to detect when elements enter the viewport and trigger loading.
- Instance Lifecycle Management - Provides methods to create, destroy, and force-load all images, managing the observer and event listeners.
- Preloading Placeholders - Loads a low-resolution placeholder image first, then swaps it with the full-resolution image once triggered.
- jQuery-Compatible Libraries - Provides a jQuery-compatible wrapper for lazy loading images with familiar syntax.
- jQuery Plugins - Wraps the vanilla JavaScript functionality in a jQuery-compatible interface for drop-in integration.
- Event-Driven Loading Triggers - Provides event-driven loading triggers on scroll, resize, or orientation changes.
- Placeholder-First Loading - Shows a low-resolution placeholder that blurs into the sharp image once fully loaded.
- Blur-Up Transitions - Shows a low-resolution placeholder that blurs into the sharp image once fully loaded for a smoother visual transition.
