Cara Membuat Lazyload Otomatis Gambar di Artikel

 Jika kamu menggunakan template dari jagodesain seperti median ui, iMagz, dan fletro yang versi terbarunya itu sudah support lazyload hanya saja tidak di gambar dalam artikel melainkan di homepagenya saja.

Jadi jika ingin menggunakan lazyload gambar di dalam postingan artikel kamu harus menambahkan class lazy, attribute data-src, dan atribute src di ubah dengan kode gambar seperti kode yang ada 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 cara di atas gambar di postingan akan otomatis lazyload akan tetapi kamu harus melakukannya secara manual dan harus seperti jika kamu ingin menyisipkan gambar ke postingan tersebut.

Dan jika kamu terus menggunakan cara manual seperti di atas untuk gambar yang ke 2 dan seterusnya maka gambar pertama tidak akan bisa menggunakan lazyload dan di homepage akan blank.

Lantas bagaimana caranya supaya bisa menggunakan lazyload di semua gambar di dalam artikel maupun di homepage dengan aman tanpa blank ? Kali ini saya akan membagikan script otomatis lazyload di dalam postingan artikel tanpa error dan work, untuk caranya silahkan simak titorial di bawah ini.

Cara Membuat Lazyload Otomatis Gambar di Artikel

Jika sebelumnya kamu sudah menggunakan cara manual seperti di atas, kamu tidak perlu merombak atau mengganti kode apapun karena script yang saya bagikan ini tidak berpengaruh dengan tag img yang mempunayi attribute src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

• Silahkan kamu masuk ke blog kalian lalu pilih edit html
• Salin kode di bawah ini dan letakan tepat 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 silahkan simpan template kamu dan selesai.

Sangat mudah bukan untuk caranya, sekian dulu postingan tentang Cara Membuat Lazyload Otomatis Gambar di Artikel semoga bermanfaat dan terimakasih sudah berkunjung.

Baca juga :

Go to Link