Pasang Lazy Load image di website - Dayat

Pasang main script berikut di atas tag </body> pada template web yang akan dipasang lazyload.

<script type='text/javascript'>/*<![CDATA[*/
  function lazy(){let t=document.querySelectorAll("*[data-src]");for(let e=0;e<t.length;e++){let a=t[e].getBoundingClientRect();t[e].hasAttribute("data-src")&&a.top<window.innerHeight&&(t[e].setAttribute("src",t[e].getAttribute("data-src")),t[e].removeAttribute("data-src"),t[e].classList.remove("lazy"),t[e].classList.add("lazyloaded"))}}["resize","scroll"].forEach(t=>{window.addEventListener(t,lazy)});
/*]]>*/</script>

Agar script diatas bekerja kalian harus mengubah format html yang dipasangi url gambar. Contoh:

<img src='url_gambar' title='judul_gambar' alt='judul_gambar' width='250' height='167'>

HTML diatas harus diubah menjadi seperti ini.

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' class='lazy' data-src='url_gambar' title='judul_gambar' alt='judul_gambar' width='250' height='167'>

Sampai sini saja penjelasan nya entah paham atau tidak. Adapun jika kalian ingin menambahkan animasi loading bisa gunakan kode di demo berikut sebagai referensi.

Demo di Codepen