DEV Community

Cover image for Lazy-load Image - JavaScript & CSS
boibolang
boibolang

Posted on

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>

Enter fullscreen mode Exit fullscreen mode
/* 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;
}

Enter fullscreen mode Exit fullscreen mode
// 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));

Enter fullscreen mode Exit fullscreen mode

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

file

Top comments (0)