Author: | johannschopplich |
---|---|
Views Total: | 19 views |
Official Page: | Go to website |
Last Update: | March 26, 2025 |
License: | MIT |
Preview:

Description:
unlazy is an SEO-friendly and framework-agnostic lazy loading library that displays a blurry image placeholder until the original image is completely loaded.
It works with the native loading=”lazy” attribute and uses the Intersection Observer API to detect when an image enters the viewport.
unlazy allows you to initially load low-quality blurry placeholder images and smoothly transition them to full-resolution images as they scroll into view. It supports BlurHash or ThumbHash placeholders both on the client side and server-side (during server-side rendering), which allows you to use BlurHash as a placeholder for images that have not yet loaded.
In addition, the library is easy to integrate into popular JS frameworks like React, Vue,js, Solid, etc.
How to use it:
1. Install and import the unlazy.
# Yarn $ yarn add unlazy # NPM $ npm i unlazy
import { lazyLoad } from 'unlazy' // initialize the unlazy lazyLoad()
<!-- OR --> <script src="https://unpkg.com/unlazy" defer init></script>
2. Add the blurry placeholder to the src
attribute.
<img loading="lazy" src="data:image/svg+xml, ..." >
3. Specify the path to the original image(s) using the data-srcset
attribute.
<img loading="lazy" src="data:image/svg+xml, ..." data-srcset="1x.png 1024w, 2x.png 2048w" data-sizes="auto" width="1024" height="768" >
4. It also works with the picture
tag.
<picture> <source loading="lazy" src="data:image/svg+xml, ..." data-srcset="original.jpg" media="(min-width: 800px)" > </picture>
5. Use BlurHash or ThumbHash to generate blurry placeholders.
<img data-srcset="https://source.unsplash.com/EBtfyalTU50/2400x1600" data-blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH" loading="lazy" data-sizes="auto" width="1024" height="768" style="aspect-ratio: 4/3" alt="Image with blurry placeholder" >
<img data-src="image.jpg" data-thumbhash="1QcSHQRnh493V4dIh4eXh1h4kJUI" >
Changelog:
v0.12.x (03/26/2025)
- Bugfixes
- Allow overwriting loading prop
v0.11.5/6/7/8 (11/12/2024)
- Bugfixes
- Use current date for placeholder id as well
- Outsource check for descendant of picture
v0.11.4 (11/08/2024)
- Bugfixes
v0.11.3 (04/04/2024)
- Bugfixes
- Move from Buffer to Uint8Array
v0.11.2 (03/11/2024)
- Bugfixes
v0.11.1 (02/19/2024)
- nuxt: Emit error event
- vue: Emit error event
v0.11.0 (02/18/2024)
- Ensure image pre load event is called once
- Bugfixes
v0.10.5 (02/18/2024)
- Update sources to prevent duplicate downloads
v0.10.4 (01/07/2024)
- vue,nuxt: loaded event when image is loade
v0.10.3 (01/03/2024)
- Support Svelte 4
v0.10.2 (11/06/2023)
- Rename __ENABLE_HASH_DECODING__ to __UNLAZY_HASH_DECODING__
v0.10.1 (09/12/2023)
- Bugfixed
- Improved performance
v0.10.0 (09/11/2023)
- Bugfixes
v0.9.5 (09/09/2023)
- Don’t expose internal updateSizesAttribute
- core: Respect image sizes if present
- core: Add cleanup handler only if resize handler initiated
- nuxt: Use autoSizes to calculate sizes for preloading
- vue: Use autoSizes to calculate sizes for preloading
v0.9.4 (09/07/2023)
- Expose updateSizesAttribute
- Bugfixes
v0.9.3 (09/01/2023)
- Update
v0.9.1 (07/19/2023)
- Update sizes attribute on image resize with new value
v0.9.1 (07/07/2023)
- vue: Add preload prop
v0.9.0 (06/20/2023)
- Bugfix & Update
v0.8.9 (05/08/2023)
- Bugfixes
v0.8.8 (04/25/2023)
- Bugfixes
v0.8.4 (04/25/2023)
- Bugfixes
- components: src an srcSet props for lazy loading
v0.8.1 (04/25/2023)
- Remove immediate option
- nuxt: lazyLoad prop for data saving mode etc.
- added Svelte component
v0.7.6 (04/24/2023)
- components: immediate prop
- bugfixes
v0.7.0 (04/22/2023)
- ThumbHash support