Teknik lazy image loading pada blog sangat berguna untuk mempercepat waktu muat halaman dan menghemat bandwidth. Gambar hanya dimuat ketika pengguna telah menggulir ke area gambar pada halaman blog, sehingga gambar yang tidak dilihat oleh pengguna tidak perlu dimuat. Berikut ini adalah langkah-langkah untuk menerapkan teknik lazy image loading pada blog
1. Gunakan gambar yang ukurannya telah dioptimalkan
Gunakan gambar yang ukurannya telah dioptimalkan. Pastikan ukuran gambar sesuai dengan kebutuhan dan tidak terlalu besar sehingga memakan waktu lama untuk dimuat.
2. Tambahkan class
Tambahkan class "lazy" pada tag gambar yang akan dimuat secara lazy.
<img class="lazy" data-src="gambar-lazy.jpg" alt="Gambar Lazy">
3. Tambahkan atribut "data-src"
Tambahkan atribut "data-src" pada tag gambar dengan nilai URL gambar yang akan dimuat secara lazy.
<img class="lazy" data-src="gambar-lazy.jpg" alt="Gambar Lazy">
4. Atur nilai "src"
Atur nilai "src" pada tag gambar menjadi gambar placeholder atau gambar yang ukurannya lebih kecil dari gambar asli. Ini akan membantu mempercepat waktu muat halaman dan memberikan waktu bagi gambar yang akan dimuat secara lazy untuk dimuat.
<img class="lazy" src="gambar-placeholder.jpg" data-src="gambar-lazy.jpg" alt="Gambar Lazy">
5. Tambahkan script
Tambahkan script JavaScript untuk memuat gambar ketika gambar dalam viewport.
<script>
const lazyImages = document.querySelectorAll('.lazy');
function loadImage(image) {
const src = image.getAttribute('data-src');
image.setAttribute('src', src);
image.removeAttribute('data-src');
image.classList.add('loaded');
}
function isImageInViewport(image) {
const rect = image.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function lazyLoad() {
for (let i = 0; i < lazyImages.length; i++) {
if (isImageInViewport(lazyImages[i])) {
loadImage(lazyImages[i]);
}
}
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
</script>
6. Tambahkan CSS
Tambahkan CSS untuk mengatur gambar placeholder dan memberikan efek transisi pada gambar ketika gambar dimuat.
<style>
.lazy {
opacity: 0;
transition: opacity 0.3s ease;
}
.loaded {
opacity: 1;
}
</style>
Dengan menerapkan teknik lazy image loading pada blog, gambar hanya akan dimuat ketika pengguna telah menggulir ke area gambar. Ini akan membantu mempercepat waktu muat halaman dan menghemat bandwidth dengan menghindari memuat gambar yang tidak dilihat oleh pengguna. Selain itu, pengguna juga akan lebih nyaman dan tidak terganggu dengan gambar yang memakan waktu lama untuk dimuat.
