Display Blurry Placeholders While Loading Images – unlazy

Category: Javascript , Loading , Recommended | September 12, 2023
Author:johannschopplich
Views Total:240 views
Official Page:Go to website
Last Update:September 12, 2023
License:MIT

Preview:

Display Blurry Placeholders While Loading Images – unlazy

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 --&gt;
<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.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

You Might Be Interested In:


Leave a Reply