Repository files navigation

Universal lazy loading library leveraging native browser APIs. It is intended to be used with theloading="lazy" attribute alongside (blurry) placeholder images and with aBlurHash orThumbHash string.

• 🎀Native: Utilizes theloading="lazy" attribute
• 🎛️Framework-agnostic: Works with any framework or no framework at all
• 🌊BlurHash & ThumbHash support: SSR & client-sideBlurHash andThumbHash decoding
• 🪄Sizing: Automatically calculates thesizes attribute
• 🔍SEO-friendly: Detects search engine bots and preloads all images
• 🎟<picture>: Supports multiple image tags
• 🏎Auto-initialize: Usable without a build step

📖 Read the documentation

# pnpmpnpm add -D unlazy# npmnpm i -D unlazy

📖 Read the documentation

To apply lazy loading to all images with theloading="lazy" attribute, import thelazyLoad 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 tolazyLoad.

1. Clone this repository
2. EnableCorepack usingcorepack enable
3. Install dependencies usingpnpm install
4. Runpnpm run dev:prepare
5. Start development server usingpnpm run dev inside the one of thepackages directories

MIT License © 2023-PRESENTJohann Schopplich