LazyLoad (or vanilla-lazyload) is an open-source, lightweight script designed to improve website performance by deferring asset loading.

Here is a summary of its main characteristics:

Core Identity and Performance Optimization

• Goal: LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application.

• Mechanism: It works by deferring the loading of elements that are below-the-fold until they are about to enter the viewport.

• Technology Base: It is written in plain "vanilla" JavaScript. It leverages the IntersectionObserver API.

• SEO Friendliness: The script is SEO friendly as it does not hide assets from search engines. It detects if the user agent can scroll; if not, it instantly reveals all images.

Supported Content Types and Customization

LazyLoad can defer the loading of several types of content, requiring the use of data- attributes instead of actual attributes (e.g., data-src instead of src).

Content TypeKey Features / SupportImagesSupports standard images, responsive images with srcset and sizes (using data-srcset and data-sizes). It also supports responsive images using the <picture> tag for art direction, Hi-DPI support, and WebP format selection.BackgroundsOnly vanilla-lazyload can lazyload background images, including single backgrounds, multiple backgrounds, and supporting HiDPI screens (Retina/Super Retina displays). It also supports backgrounds applied with image-set().VideosIt can lazyload the <video> tag, including multiple <source> tags. The video poster can also be lazily loaded.IframesSupports lazy loading the <iframe> tag.Scripts/FunctionsCan be configured to lazily execute arbitrary scripts or functions when specific elements enter the viewport.SVGsCan lazyload animated SVGs via the <object> tag.

Advanced Features and Reliability

• Native Lazy Loading: It supports the conditional usage of native lazy loading by setting the use_native option to true. On supporting browsers, it delegates the loading of images, iframes, and videos to the browser using the loading="lazy" attribute.

• Dynamic Content: Provides an update() method to re-check the DOM for lazy elements after content has been added or removed asynchronously (e.g., via AJAX).

• Handling Long Tasks: It optimizes for performance by cancelling the download of images that exit the viewport while still loading, which is especially helpful for mobile users on slow connections.

• Error Handling: If an error occurs (such as a network connection going offline), vanilla-lazyload retries loading the assets when the network becomes available again. It also allows for image error handling via a callback_error function, enabling users to set fallback images.

• Layout Stability: It provides tips to minimize CLS (Cumulative Layout Shift) by advising developers to set width and height attributes on lazy images/videos to occupy space before loading.

• API Control: It offers methods to loadAll() remaining elements, restoreAll() (restoring DOM to its original state, useful for SPAs), and destroy() the instance to free memory.

Implementation and Installation

• Installation: It can be installed using npm (npm install vanilla-lazyload), bower, or included directly from a CDN.

• Initialization: It is typically initialized by creating a new instance of LazyLoad and passing an options object (new LazyLoad({})).

• Configuration: Highly flexible, the API allows customization of options such as the scrolling container, the loading threshold (or multiple thresholds using rootMargin syntax), and the CSS elements_selector (defaulting to ".lazy").

• Bundles: Available in UMD, IIFE, and ES Module formats.