Cara Implementasi Lazy Load Gambar dengan JavaScript
Oleh Edhik PFull-Stack Developer & Pro Digital AdsPerkiraan waktu baca: 4 menit
Lazy load adalah teknik yang digunakan untuk menunda pemuatan gambar sampai gambar tersebut benar-benar dibutuhkan, biasanya ketika pengguna mulai menggulir halaman hingga gambar terlihat di layar (viewport). Teknik ini membantu mengoptimalkan performa halaman dengan mengurangi waktu loading awal.
Membuat Struktur HTML
Pertama, teman-teman perlu membuat file HTML untuk menampilkan gambar dengan teknik lazy load. Berikut adalah contoh kode untuk 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 Gambar</title>
</head>
<body>
<img class="lazy" src="https://kodemastery.com/assets/lazy/post-lazy.webp" data-src="https://kodemastery.com/storage/posts/kfYMAFN3te4vCpsuLauEFTIKKS3oLaS4VoNeAKxD.webp?w=1200" alt="Gambar 1" width="600" height="400">
<img class="lazy" src="https://kodemastery.com/assets/lazy/post-lazy.webp" data-src="https://kodemastery.com/storage/posts/kfYMAFN3te4vCpsuLauEFTIKKS3oLaS4VoNeAKxD.webp?w=1200" alt="Gambar 2" width="600" height="400">
<img class="lazy" src="https://kodemastery.com/assets/lazy/post-lazy.webp" data-src="https://kodemastery.com/storage/posts/kfYMAFN3te4vCpsuLauEFTIKKS3oLaS4VoNeAKxD.webp?w=1200" alt="Gambar 3" width="600" height="400">
<script src="lazyload.js"></script>
</body>
</html>
Dalam kode ini, setiap gambar memiliki dua atribut:
srcyang berisi placeholder (gambar sementara).data-srcyang berisi URL gambar asli yang akan dimuat saat gambar mulai terlihat.
Setiap gambar juga memiliki kelas lazy yang akan digunakan oleh JavaScript untuk mengidentifikasi bahwa gambar ini akan menggunakan lazy load.
Membuat Script Lazy Load
Setelah membuat struktur HTML, teman-teman perlu membuat file JavaScript untuk menangani lazy load. Berikut adalah contoh kode untuk lazyload.js:kode berikut:
document.addEventListener("DOMContentLoaded", function() {
// Pilih semua elemen gambar yang memiliki kelas "lazy"
const lazyImages = document.querySelectorAll("img.lazy");
// Cek apakah browser mendukung IntersectionObserver
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
console.log("Lazy load berhasil untuk:", lazyImage.alt);
}
});
});
// Observasi setiap gambar yang memiliki kelas lazy
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback jika browser tidak mendukung IntersectionObserver
// Muat semua gambar secara langsung
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
});
}
});
Setelah halaman selesai dimuat, JavaScript akan mencari semua elemen gambar yang memiliki kelas lazy menggunakan document.querySelectorAll("img.lazy"). Untuk mengidentifikasi elemen-elemen gambar yang akan diterapkan lazy load.
const lazyImages = document.querySelectorAll("img.lazy");
Semua gambar yang memiliki kelas lazy akan disimpan dalam variabel lazyImages, dan siap untuk dipantau oleh observer atau langsung dimuat.
Langkah berikutnya adalah mengecek apakah browser mendukung IntersectionObserver, yang merupakan API untuk memantau apakah elemen muncul di viewport (area tampilan) pengguna. Jika browser mendukung, observer akan diaktifkan untuk memantau setiap gambar.
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
// ...
});
}
Kode di atas mengecek apakah IntersectionObserver tersedia di window. Jika iya, maka lazyImageObserver akan dibuat untuk memantau gambar.
Ketika gambar mulai terlihat di layar (masuk ke dalam viewport), IntersectionObserver akan memicu event. Pada event ini, atribut src gambar akan diubah dari placeholder ke URL gambar asli (yang ada di data-src). Setelah gambar dimuat, kelas lazy akan dihapus, dan observer berhenti memantau gambar tersebut menggunakan lazyImageObserver.unobserve(lazyImage).
lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src; // Mengganti src dengan data-src
lazyImage.classList.remove("lazy"); // Menghapus kelas lazy
lazyImageObserver.unobserve(lazyImage); // Berhenti memantau gambar
console.log("Lazy load berhasil untuk:", lazyImage.alt);
}
});
});
Kode di atas memastikan bahwa saat gambar terlihat di layar, URL gambar asli diambil dari data-src, menggantikan placeholder. Setelah itu, observer berhenti memantau gambar yang sudah dimuat.
Jika browser tidak mendukung IntersectionObserver, maka script akan memuat semua gambar secara otomatis tanpa menunggu elemen masuk ke viewport. Dalam hal ini, gambar akan langsung dimuat dari data-src tanpa menggunakan lazy load.
else {
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src; // Langsung muat gambar asli
});
}
jika IntersectionObserver tidak tersedia, browser akan langsung mengubah src dari placeholder ke data-src dan memuat gambar asli secara otomatis.
Dengan cara ini, lazy load tetap bisa berfungsi di browser yang lebih baru, dan gambar tetap dimuat di browser yang tidak mendukung API tersebut.
Jalankan di browser dan tampilan muncul seperti ini :
Ketika tampilan sesuai dengan contoh di atas dan pesan "Lazy load berhasil untuk: Gambar 1 sampai 3" muncul di console, itu berarti teman-teman sudah berhasil mengimplementasikan lazy load gambar dengan benar. Coba refresh browser, dan teman-teman akan melihat placeholder muncul terlebih dahulu sebelum gambar asli dimuat.