Pasang Script Lazyload Otomatis Pada Gambar Artikel

Dikesempatan kali saya akan bagikan cara Pasang Script Lazyload Otomatis Pada Gambar Artikel khususnya pada template Median Ui, Fletro Pro dan Imgaz.

Bagaimana dengan template lainnya?

Saya belum mencobanya. Namun jika dalam template tersebut sudah ada script lazyload saya pikir akan work juga untuk memasang script otomatis yang saya bagikan ini.

Sebagai tambahan informasi script js ini hanya menambahkan class dan attribute secara otomatis pada gambar supaya Anda tidak perlu menerapkannya secara manual. Sebab sebelumnya memang template ini sudah terpasang script lazyload sehingga fungsi utama dari script yang saya bagikan ini adalah untuk memanggil fungsinya saja.

Memang pada template seperti Median Ui, Fletro Pro dan Imgaz sudah terpasang script Lazyload gambar namun itu tidak untuk gambar yang berada dalam artikel. Sehingga kita membutuhkan script tambahan yang saya bagikan di artikel ini.

Script Lazyload Otomatis Gambar Dalam Artikel

Silahkan kamu salin script dibawah ini dan letakkan di atas kode </body> atau &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>

Jika sudah jangan lupa simpan.

Sekian artikel tentang Pasang Script Lazyload Otomatis Pada Gambar Artikel ini. Semoga bermanfaat.