🪧 Universal lazy loading library for placeholder images leveraging native browser APIs
MIT License
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.
loading="lazy"
attributesizes
attribute<picture>
: Supports multiple image tags# pnpm
pnpm add -D unlazy
# npm
npm i -D 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