Kode Jarwo

ZapLoad.js – Library JavaScript untuk lazy loading

ZapLoad.js – Library JavaScript untuk lazy loading

ZapLoad.js merupakan sebuah library untuk bahasa pemrograman JavaScript. Fungsi dari library ini untuk melakukan lazy loading untuk elemen-elemen yang menggunakan src, seperti img, video, script, object, dan iframe.

Masih asing dengan kata lazy load?

Singkatnya, lazy load itu suatu trik untuk mempercepat loading halaman, dengan menunda pemuatan elemen-elemen tertentu.

Kelebihan ZapLoad.js


Beberapa kelebihan ZapLoad.js dibandingkan dengan JS library lain yaitu:
  • Sangat ringan (lightweight), yaitu sekitar 2,9KB
  • Dapat diterapkan untuk tag img, video, script, object, dan iframe
  • Dapat ditempatkan dimanapun di dalam html
  • Dibuat di atas vanilla JS - tidak memerlukan dependensi/framework/library lain
  • Sangat baik untuk SEO dan optimasi kecepatan loading web

Fitur-fitur ZapLoad.js


Terdapat 5 tipe penundaan pemuatan yang dimiliki ZapLoad.js, antara lain:
  • scroll : Penundaan hingga user melakukan scroll
  • scroll [selector] : Penundaan hingga user melakukan scroll hingga selector muncul di viewport
  • click [selector] : Penundaan hingga user mengklik selector
  • timeout [time] : Penundaan hingga waktu tertentu (dalam milidetik)
  • custom : Penundaan hingga fungsi dipanggil di JS

Contoh Penggunaan


ZapLoad dapat digunakan dengan menambahkan class .zapload dan atribut data-zapload pada elemen yang ingin ditunda pemuatannya. Setelah itu, ubah atribut src menjadi data-src. Contoh:

<!-- Load when user scroll min. of 1px -->
<img class="zapload" data-zapload="scroll" data-src="https://via.placeholder.com/300x200">

<!-- Load when user scrolls to #home -->
<img class="zapload" data-zapload="scroll #home" data-src="https://via.placeholder.com/300x200">

<!-- Load when user click #home -->
<img class="zapload" data-zapload="click #home" data-src="https://via.placeholder.com/300x200">

<!-- Load after 3s (3000ms) -->
<img class="zapload" data-zapload="timeout 3000" data-src="https://via.placeholder.com/300x200">

ZapLoad juga dapat diterapkan dengan menggunakan JS, sebagai berikut:

function doSomething(){
  zapload("#logo"); // Load after doSomething() called
}

Instalasi


Instalasi dengan menggunakan npm:

npm i zapload

Instalasi dengan CDN:

<script src="https://unpkg.com/zapload/zapload.js"></script>

atau versi minified nya:

<script src="https://unpkg.com/zapload/zapload.min.js"></script>

Dokumentasi


Dokumentasi lebih lanjut dapat dilihat di link berikut:

Kritik, saran, dan masukan sangat saya harapkan :D