Lazy-load Image - JavaScript & CSS

Dalam pembuatan web application, salah satu elemen yang paling banyak menyedot resource adalah image (gambar). Maka dari itu ada berbagai macam cara menyimpan gambar dalam sebuah web application. Kali ini kita akan belajar salah satu cara memanipulasi gambar yaitu lazy-load, lazy-load kita masih akan memakai intersection observer. Triknya adalah kita siapkan 2 buah gambar yang satu dengan resolusi penuh, satunya lagi dengan resolusi rendah. Gambar dengan resolusi rendah akan kita pakai sebagai default, ketika target memasuki intersection maka kita ganti dengan gambar resolusi penuh

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy-load Image</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>Lazy-load Image</header>
    <div class="section">
      <img src="image/img1s.png" alt="" data-img="image/img1.png" width="500px" class="lazy-img" />
    </div>
    <div class="section">
      <img src="image/img3s.png" alt="" data-img="image/img3.png" width="500px" class="lazy-img" />
    </div>
    <div class="section">
      <img src="image/img2s.png" alt="" data-img="image/img2.png" width="500px" class="lazy-img" />
    </div>
    <script src="app.js"></script>
  </body>
</html>

/* style.css */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.lazy-img {
  filter: blur(20px);
}

img {
  transition: all 0.3s ease-out;
}

header {
  font-size: 200px;
}

header,
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section:nth-child(odd) {
  background-color: cadetblue;
}

.section:nth-child(even) {
  background-color: blanchedalmond;
}

// app.js

const imgTargets = document.querySelectorAll('img[data-img]');

const loadImg = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;

  // ganti gambar dengan resolusi penuh
  entry.target.src = entry.target.dataset.img;

  // ketika target load, hilangkan class 'lazy-image'. jika tidak memakai fungsi ini, maka efek smooth-nya tidak akan tampak
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '-200px',
});

imgTargets.forEach((img) => imgObserver.observe(img));

Kuncinya ada pada potongan kode berikut
<img src="image/img1s.png" alt="" data-img="image/img1.png" width="500px" class="lazy-img" />
Image source src="image/img1s.png" berisi gambar dengan resolusi rendah sedangkan calon penggantinya ada pada kode data-img="image/img1.png", lalu kita manipulasi dengan javascript lewat kode entry.target.src = entry.target.dataset.img. Hasilnya sebagai berikut

boibolang @boibolang

Lazy-load Image - JavaScript & CSS

Comments 0 total