Membuat Lazyload Otomatis di Blogspot

Lazy Load adalah salah satu cara untuk mempercepat loading blog dengan cara memasukan script yang akan menunda pemanggilan file sebelum melakukan aktifitas scroll. Jadi secara singkatnya, gambar pada artikel tidak akan mucul saat belum melakukan scroll.

Saat ini, hampir semua template premium telah support fitur yang satu ini. Namun, jika kamu yang saat ini menggunakan template lama dan sudah keburu nyaman dengan template yang kamu gunakan, maka kamu bisa menggunakan script dibawah ini untuk membuat lazy load di blogspot kamu.

Untuk memasang lazyload di blogspot, kamu harus menambahkan beberapa point penting diantaranya :

menambahkan class="lazy" pada tag img
mengubah expr:src menjadi expr:data-src
menambahakn src dan valuenya diisi dengan kode gambar base64 : src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

hasilnya lebih kurang akan seperti ini :

<img alt="judul" class="lazy" data-src="Url-gambar" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>

Dengan menggunakan kode html diatas, maka membuat gambar postingan kamu otomatis support Lazyload.

Nah bagaimana jika kamu sudah telah memiliki banyak artikel di blog?

Script Lazy Load Otomatis Gambar di Artikel

Jika kamu sudah memiliki banyak postingan di blog, jangan khawatir. Kamu hanya perlu menambahkan kode dibawah ini dan letakan diatas kode </body> :

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
var psBody = document.querySelector('.postBody');
var lzImgT = psBody.getElementsByTagName('img');
var imgBs = 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
for(var i = 0; i < lzImgT.length; i++) {
    var currentSrc = lzImgT[i].getAttribute('src');
    if(currentSrc != imgBs){
        lzImgT[i].setAttribute('src',imgBs);
        lzImgT[i].setAttribute('data-src',currentSrc);
        lzImgT[i].className += ' lazy';}}
//]]>
</script>
</b:if>

Dengan atribut diatas, kamu tidak perlu lagi mengubah satu per satu atribut gambar sehingga bisa melakukan memposting seperti biasa.

Sekian yang bisa saya bagikan, semoga bermanfaat.

source : wendycode.com