Cara Membuat LazyLoad Otomatis Gambar Di Artikel

LAzyLoad sendiri merupakan sebuah teknik yang banyak digunakan untuk menunda pemuatan gambar pada blog atau website sebelum halaman di scroll pada gambar tersebut.

Cara ini cukup efektif untuk mengurangi beban kerja website/blog sehingga kecepatan blog/website akan meningkat.

Dan pada kesempatan kali ini, saya akan membagikan tutorial mengenai skrip lazyload gambar otomatis di artikel khususnya pad template Median UI, Fletro Pro, dan iMagz.

Untuk template lainnya yang tidak disebutkan di atas dapat mengunjungi tautan ini.

Memang pada template Fletro Pro, Median UI, serta iMagz versi terbaru sudah mendukung lazyload, namun itu bukan gambar artikel, melainkan hanya gambar thumbnail homepage dan thumbnail related post, dan menurut saya itusangat kurang.

Jadi jika kita ingin menerapkan lazyload gambar pada post artikel kita harus menambahkan class lazy dan attribute data-src yang disusul dengan attribute src yang di ubah dengan kode gambar base64 yang terlihat seperti di bawah ini.

<img alt="judul" class="lazy" data-src="https://1.bp.blogspot.com/blabla.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>

Dengan melakukan penulisan format di atas kita sudah menerapkan lazyload pada gambar, namun itu harus dilakukan secara manual, dan pada gambar pertama yang defaultnya akan menjadi thumbnail artikel kita tidak bisa kita terapkan cara seperti itu dikarenakan akan menyebabkana gambar blank pada tampilan homepage maupun related post.

Namun dengan menggunakan script yang saya bagikan di bawah ini, semua gambar yang ada di dalam artikel akan otomatis support lazyload termasuk gambar pertama tanpa menyebabkan thumbnail di homepage dan related post akan jadi blank tanpa pula kita merubah format penulisan tag <img> untuk support lazyload.

Namun jika sebelumnya kalian sudah terlanjur menerapkan lazyload cara manual, kalian tidak perlu khawatir untuk mengubah gambar-gambar tersebut kembali, karena script ini tidak akan mempengaruhi tag <img> yang sudah memiliki atribut src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

Script Lazyload Otomatis Gambar Di Artikel

Langkah 1. Masuk pada Dasboard Blogger lalu pilih Tema kemudian pilih Edit HTML.

Langkah 2. Silahkan kalian salin kode di bawah ini kemudian tempelkan kode tersebut tepat di atas kode </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;.

<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>

Langkah 3. Simpan template kalian dengan cara klik Simpan.

Penutup

Oke, jadi cuma itu tutorial Script Lazyload Otomatis Gambar Di Artikel. Jika ada yang ingin ditanyakan atau request lainnya silahkan tuliskan pada kolom komentar. Terimakasih.

Referensi:
https://www.wendycode.com/2022/03/script-lazyload-otomatis-gambar-di-artikel.html