10 Javascript Lazy Load Image Libraries

The Intersection Observer is an API to conditionally perform some action when an element enters the viewport/view. So here are some Javascript lazy load image libraries that use Intersection Observer API to both maximize performance and user experience.

Yall.js

yall.js is a featured-packed SEO-friendly lazy loader for img, picture, video and iframe elements, as well as CSS background images. It works in all modern browsers, including IE 11. It uses Intersection Observer where available, but as of version 3, this API must be polyfilled for older browsers. It can also monitor the DOM for changes using Mutation Observer to lazy load elements that have been appended to the DOM after initial load, which may be desirable for single page applications. It can also optimize use of browser idle time using requestIdleCallback, and reduce jank by using requestAnimationFrame.

Gluebert

gluebert.js is a tiny helper lazy loading DOM Elements, StyleSheets and JavaScript files using dynamic import and code splitting.

Accessible Image Lazy Load

It is a lightweight non-dependant javascript module that adds a different approach on lazy loading focusing on accessibility. Most existing options work by either making you drop the src attribute of the image or, making you create a base64 data / low resolution blurred alternative version of the image, or also including the img element into a noscript tag. This could be hacky and verbose and the main issue with it is that alters the semantics of the original element.

Lozad.js

Highly performant, light 1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more. It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits. Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect forces the browser to re-layout the entire page and will introduce considerable jank to your website. Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

Lazyload

LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading your content images, videos and iframes only as they enter the viewport. It’s written in plain vanilla JavaScript, it leverages the IntersectionObserver API, it works with responsive images and it supports native lazy loading. Instead of listening to the scroll and resize events, LazyLoad uses the Intersection Observer API which is a new, blazing fast method to detect if an element is inside the browser viewport. Your users will see the difference in slow and even in fast devices or computers.

React Simple Img

React lazy load images with IntersectionObserver API and Priority Hints.

V Lazy Image

Lazy load images using Intersection Observer, apply progressive rendering and css animations. A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

Bounds.js

Asynchronous boundary detection – lazy-loading, infinite scroll, and more. Whether you’re lazy-loading images, implementing infinite-scroll, or avoiding an ex-lover. it’s important to set boundaries. Historically, boundary detection required a mix of event handlers, loops, and calls to getBoundingClientRect. Since these operations run on the main thread, performance would suffer. Bounds.js defies these expectations, providing a simple and powerful API. It detects intersections between elements asynchronously, keeping complex operations off the main thread and improving performance.

Ng In Viewport

ng-in-viewport gives you a directive that uses Intersection Observer API. To provides a simple way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Lazy Observer Load

A library to lazy load images using Intersection Observer.

#javascript #programming