Menggunakan Lazy Loading Untuk Gambar Pada Vue menggunakan Plain JS
Gambar sering digunakan di situs web. Situs web e-niaga biasanya menggunakan daftar gambar yang panjang. Dalam kebanyakan kasus, gambar-gambar ini berat dan besar dan memperlambat kecepatan pemuatan DOM.
Contoh Image Loading
Ini adalah contoh pemuatan gambar yang tidak merata yang dapat menyebabkan pengalaman pengguna yang buruk.Jenis skenario ini memuat semua gambar di halaman sekaligus, yang memperlambat kinerja situs Anda. Untungnya, lazy loading adalah solusi yang mengurangi payload dan waktu buka halaman pertama, tetapi tidak membuang konten.
Apa itu pemuatan malas?
Lazy loading adalah teknik untuk menunda pemuatan sumber daya yang tidak penting saat memuat halaman. Sebaliknya, sumber daya yang tidak penting ini dimuat saat dibutuhkan. Dalam hal gambar, "tidak penting" sering kali identik dengan "di luar layar".
Contoh memuat gambar malas dapat ditemukan di platform penerbitan populer Medium. Platform memuat gambar placeholder ringan saat halaman dimuat dan bergulir ke viewport untuk menggantikannya dengan gambar yang dimuat lambat.
Cara lazy loading gambar dengan Plain JS
Ada dua metode vanilla js untuk mengimplementasikan lazy loading untuk gambar
- Pengamat observer
- Menggunakan event handler (metode yang paling kompatibel)
Mari kita bicara tentang metode kedua. Ini adalah metode yang paling kompatibel dan dapat digunakan di semua browser. Pemuatan gambar yang lambat menggunakan event handler komponen Vue
Mekanisme ini memeriksa apakah komponen gambar berada di viewport pada setiap scroll. Gunakan metode yang disebut getBoundingClientRect untuk melihat kasus penggunaan di atas.
Tambahkan tag gambar untuk nama kelas ke komponen. Contoh: kelas = ”lazy”.
<img src="/images/place-holder.png" class="lazy" data-src="real-image.png"/>
Properti src menyimpan gambar placeholder yang awalnya berukuran sangat kecil. Properti data-src menyimpan gambar yang sebenarnya. Saat halaman dimuat, gambar placeholder dimuat alih-alih gambar yang ditentukan dalam data-src.
Kemudian periksa apakah komponen gambar mencapai viewport. Gunakan windows scroll event listener untuk ini. Scroll event listener harus diinisialisasi dengan beban dom dari metode mounted.
Lihat kode di bawah ini...
mounted() {
window.scrollTo(0, 0);
window.addEventListener("scroll", this.lazyLoad);
},
Sekarang mari kita tulis logika utamanya
methods: {
lazyLoad: function () {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
if (active === false) {
active = true;
setTimeout(() => {
lazyImages.forEach(function (lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function (image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
window.removeEventListener("scroll", this.lazyLoad);
}
}
});
active = false;
}, 200)
}
},
}
Kode ini menggunakan getBoundingClientRect di scroll event handler untuk memeriksa apakah viewport memiliki elemen img.lazy. Panggilan setTimeout digunakan untuk menunda pemrosesan, dan variabel aktif berisi status pemrosesan yang digunakan untuk menekan panggilan fungsi. Gambar lazy loading dan akan dihapus dari array elemen. Ketika panjang array elemen mencapai 0, scoll event handler akan menghapus kode.
Itu hampir. Anda juga dapat menggunakan pengamat persimpangan untuk mendapatkan hasil yang sama, tetapi pastikan browser Anda mendukungnya.
selamat mencoba :)