Simple Script Lazy Load Image Tanpa Jquery

Lazy Load image berfungsi untuk mempercepat pemuatan halaman atau Loading Page, images asli akan dimuat setelah halaman selesai dimuat.

Langkah pertama siapkan blank image yang akan dimuat sebelum image asli dimuat jadi usahakan image sesederhana mungkin lalu conver image ke base64 (tip: gunakan Image to Base 64 Converter) contohnya menjadi seperti dibawah ini

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
window.addEventListener('load', function(){
    var allimages= document.getElementsByTagName('img');
    for (var i=0; i<allimages.length; i++) {
        if (allimages[i].getAttribute('data-src')) {
            allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
        }
    }
}, false)

Cara pemasangannya cukup mudah copy paste script diatas lalu simpan di tag sebelum </body>, ganti src menjadi data-src dan tambahkan src dengan isi blank image yang sudah diconver ke base64 sehingga hasilnya menjadi seperti ini

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="image-asli.png" />

Sekarang silahkan dicoba, lazy load image akan terasa jika pada halaman terdapat banyak content gambar atau ketika connection internet sedang lambat.