🪧 Universal lazy loading library for placeholder images leveraging native browser APIs
Universal lazy loading library leveraging native browser APIs. It's intended to be used with the loading="lazy"
attribute alongside (blurry) placeholder images and with a BlurHash or ThumbHash string.
It's the modernized and now framework-agnostic rewrite of my Loadeer.js library, which uses an Intersection Observer to detect when an image enters the viewport.
loading="lazy"
attributesizes
attribute<picture>
: Supports multiple image tagsNote
Although the
loading="lazy"
attribute is supported in all major browsers, it is only available in Safari 16.4 (released March 2023) and later versions by default. It is important to consider this limitation when using unlazy for your project, as it might impact the user experience for visitors using older Safari versions or other unsupported browsers.
# pnpm
pnpm add unlazy
# npm
npm i unlazy
To apply lazy loading to all images with the loading="lazy"
attribute, import the lazyLoad
function and call it without any arguments:
import { lazyLoad } from 'unlazy'
// Apply lazy loading for all images by the selector `img[loading="lazy"]`
lazyLoad()
You can target specific images by passing a CSS selector, a DOM element, a list of DOM elements, or an array of DOM elements to lazy-load to lazyLoad
.
corepack enable
pnpm install
pnpm run dev:prepare
pnpm run dev
inside the one of the packages
directoriesMIT License © 2023-present Johann Schopplich