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.