Menampilkan Placeholder Blur Saat Loading Gambar

Demo Download

Raja Kode - unlazy adalah framework-agnostic lazy loading dan SEO-friendly yang menampilkan placeholder gambar blur/buram sampai gambar asli dimuat sepenuhnya.

Ia bekerja dengan atribut native loading=”lazy” dan menggunakan Intersection Observer API untuk mendeteksi saat gambar memasuki viewport.

unlazy memungkinkan Anda untuk memuat gambar placeholder buram berkualitas rendah dan dengan mulus mentransisikannya ke gambar beresolusi penuh saat digulir ke bawah. Ini mendukung placeholder BlurHash atau ThumbHash baik di sisi klien dan sisi server (selama rendering sisi server), yang memungkinkan Anda menggunakan BlurHash sebagai placeholder untuk gambar yang belum dimuat.

Selain itu, library ini mudah diintegrasikan ke dalam framework JS populer seperti React, Vue,js, Solid, dll.

Cara memasang & menggunakannnya:

1. Instal unlazy.

<script src="https://unpkg.com/unlazy" defer init></script>

2. Tambahkan blurry placeholder ke atribut src.

<img
  loading="lazy"
  src="data:image/svg+xml, ..."
>

3. Tentukan jalur ke gambar asli menggunakan atribut data-srcset.

<img
  loading="lazy"
  src="data:image/svg+xml, ..."
  data-srcset="1x.png 1024w, 2x.png 2048w"
  data-sizes="auto"
  width="1024"
  height="768"
>

4. Ini juga berfungsi dengan tag picture

<picture>
  <source
    loading="lazy"
    src="data:image/svg+xml, ..."
    data-srcset="original.jpg"
    media="(min-width: 800px)"
  >
</picture>

5. Gunakan BlurHash atau ThumbHash untuk menghasilkan placeholder blur.

<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.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