LazyLoad Images Pure JavaScript

Saya dapat meyakinkan bahwa artikel ini akan menyiapkan segalanya untuk anda, jadi yang perlu anda lakukan hanyalah menyalin dan menempel.

Tutorial Mempercepat Loading Blog Menggunakan LazyLoad

1. Copy paste kode ini sebelum tag penutup body

document.addEventListener('DOMContentLoaded', function () {
    var lazyloadThrottleTimeout;

    function lazyload() {
        if (lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
        }

        var lazyloadImages = document.getElementsByClassName('lazy');
        if (lazyloadImages.length < 1) {
            return;
        }

        lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            for (var i = 0; i < lazyloadImages.length; i++) {
                if (lazyloadImages[i].offsetTop < window.innerHeight + scrollTop) {
                    lazyloadImages[i].src = lazyloadImages[i].dataset.src;
                    lazyloadImages[i].classList.remove('lazy');
                }
            }
        }, 20);
    }

    document.addEventListener('scroll', lazyload);
    window.addEventListener('resize', lazyload);
    window.addEventListener('orientationChange', lazyload);
});

2. Ganti atribut gambar src dengan data-src

Contoh: <img src="<url>" />

Setelah di ganti menjadi: <img data-src="<url>" />

3. Poin terakhir tambahkan class="lazy" ke semua gambar yang ingin di defer menggunakan lazy load.

Rekomendasi: Saya merekomendasikan menggunakan loading="lazy" demi kompatibilitas.

Sumber kode: How to lazy load images in html with pure Javascript?