[Website][4] Lazy Load Image Html Css Javascript

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Friday, 27 Sep 2019

Hello world,

Lazy load image sering digunakan oleh para website desainer untuk mempercepat load website saat dibuka. Cara kerjanya adalah dengan memberikan load secara asynchronous atau istilah gampangnya halaman website akan terbuka seluruhnya meskipun asset-asset gambarnya belum berhasil diload. Ini sudah pasti akan mempercepat waktu membuka website.

Kalau tanpa menggunakan konsep lazyload maka website akan terus loading sampai seluruh asset berhasil diload. Oke langsung saja ke dalam contoh. Pada contoh di bawah ini adalah halaman yang sederhanya (gambar diload). Ada 3 gambar yang diload pada src.

<html>
    <head>
        <title>Website</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
    </body>
</html>

Hasilnya seperti berikut ini (pada inspect element).


Selanjutnya kita coba yang versi lazyload. Di sini saya tambahkan beberapa gambar lagi yang tidak diload pada src (tp diganti dengan 'data-src').

<html>
    <head>
        <title>Website</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
    </body>
</html>

Lalu tambahkan javascript berikut. Fungsinya adalah untuk memanggil gambar pada 'data-src' saat halaman discroll (saat tag img terlihat pada layar).

            document.addEventListener("DOMContentLoaded", function() {
                var lazyloadImages = document.querySelectorAll("img.lazy");    
                var lazyloadThrottleTimeout;

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

                    lazyloadThrottleTimeout = setTimeout(function() {
                        var scrollTop = window.pageYOffset;
                        lazyloadImages.forEach(function(img) {
                            if(img.offsetTop < (window.innerHeight + scrollTop)) {
                                img.src = img.dataset.src;
                                img.classList.remove('lazy');
                            }
                        });
                        if(lazyloadImages.length == 0) { 
                            document.removeEventListener("scroll", lazyload);
                            window.removeEventListener("resize", lazyload);
                            window.removeEventListener("orientationChange", lazyload);
                        }
                    }, 20);
                }

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

Cara mengecek hasilnya adalah dengan melihat pada inspect element. Saat pertama kali diload akan langsung dipanggil tiga gambar teratas. Lalu saat discroll akan diload gambar lainnya satu per satu. Selebihnya bisa ditambahkan sedikit css agar lebih menarik.

img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

Selamat mencoba :)