Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johannschopplich/unlazy
🪧 Universal lazy loading library for placeholder images leveraging native browser APIs
https://github.com/johannschopplich/unlazy
blurhash lazy-loading lazyload placeholder
Last synced: 1 day ago
JSON representation
🪧 Universal lazy loading library for placeholder images leveraging native browser APIs
- Host: GitHub
- URL: https://github.com/johannschopplich/unlazy
- Owner: johannschopplich
- License: mit
- Created: 2023-04-14T05:32:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-13T07:49:26.000Z (about 1 month ago)
- Last Synced: 2024-12-01T03:50:15.220Z (12 days ago)
- Topics: blurhash, lazy-loading, lazyload, placeholder
- Language: TypeScript
- Homepage: https://unlazy.byjohann.dev
- Size: 2.38 MB
- Stars: 763
- Watchers: 4
- Forks: 13
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - unlazy
README
[](https://unlazy.byjohann.dev)
# unlazy
[![npm version][npm-version-src]][npm-version-href]
[![bundle][bundle-src]][bundle-href]
Universal lazy loading library leveraging native browser APIs. It is intended to be used with the `loading="lazy"` attribute alongside (blurry) placeholder images and with a [BlurHash](https://unlazy.byjohann.dev/placeholders/blurhash) or [ThumbHash](https://unlazy.byjohann.dev/placeholders/thumbhash) string.
## Features
- 🎀 **Native**: Utilizes the `loading="lazy"` attribute
- 🎛️ **Framework-agnostic**: Works with any framework or no framework at all
- 🌊 **BlurHash & ThumbHash support**: SSR & client-side [BlurHash](https://blurha.sh) and [ThumbHash](https://github.com/evanw/thumbhash) decoding
- 🪄 **Sizing**: Automatically calculates the `sizes` attribute
- 🔍 **SEO-friendly**: Detects search engine bots and preloads all images
- 🎟 **``**: Supports multiple image tags
- 🏎 **Auto-initialize**: Usable without a build step
## Setup
> [📖 Read the documentation](https://unlazy.byjohann.dev)
```bash
# pnpm
pnpm add -D unlazy
# npm
npm i -D unlazy
```
## Basic Usage
> [📖 Read the documentation](https://unlazy.byjohann.dev)
To apply lazy loading to all images with the `loading="lazy"` attribute, import the [`lazyLoad`](https://unlazy.byjohann.dev/api/lazy-load) function and call it without any arguments:
```ts
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`](https://unlazy.byjohann.dev/api/lazy-load).
## 💻 Development
1. Clone this repository
2. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
3. Install dependencies using `pnpm install`
4. Run `pnpm run dev:prepare`
5. Start development server using `pnpm run dev` inside the one of the `packages` directories
## License
[MIT](./LICENSE) License © 2023-PRESENT [Johann Schopplich](https://github.com/johannschopplich)
[npm-version-src]: https://img.shields.io/npm/v/unlazy?style=flat
[npm-version-href]: https://npmjs.com/package/unlazy
[bundle-src]: https://img.shields.io/bundlephobia/minzip/unlazy?style=flat
[bundle-href]: https://bundlephobia.com/result?p=unlazy