Image Lazy Loading JS Native
23 Agustus 2021
Ketika halaman website dibuka, browser akan me-loading semua konten html, teks, gambar, video dalam waktu yang bersamaan.

Dengan konsep lazy loading, browser akan me-load sebagian konten yang diperlukan saja dan menunda sisanya sampai dibutuhkan oleh pengguna. misal nya ketika di scroll dan visible.

Perhatikan Script berikut..

Menggunakan attribute loading="lazy"
// Javascript codes
document.getElementById('load-now').addEventListener('click', function(){
  for (const img of document.getElementsByTagName('img')) {
    img.loading = 'eager';
  }
});
			
// HTML code
<div id="load-now" style="display:none;">Click me to load all images now! </div>
<div> <img loading="lazy" src="https://usman.rubiantoro.com/img/portrait.jpg"> </div>
<div class="separator"> </div>
<div> <img loading="lazy" src="https://usman.rubiantoro.com/img/Barack_Obama.jpg"> </div>
				
Menggunakan Lib JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" async=""></script>
<img data-src="flower.jpg" class="lazyload" alt="">
atau bisa anda download juga lib nya di web ini.


Masih bingung?
Feel free to contact me at
contact WA Usman Rubiantoro 6287820007878

Sebarkan 🙏😉 !!