baru join grup telegram

script lazyload otomatis gambar di artikel

script lazyload otomatis gambar di artikel pada template median ui, fletro pro dan imagz
lazyload otomatis gambar di artikel

Hallo semua pada kesempatan kali ini saya akan membagikan script lazyload otomatis gambar di artikel pada template median ui, fletro pro dan imgaz.

pada template buatan jagodesain.com median ui, fletro pro dan imgaz di versi terbaru sudah support lazyload gambar namun tidak termasuk gambar yang ada di dalam artikel.

jadi ketika ingin menggunakan lazyload gambar pada post artikel kita harus menambahkan class lazy dan attribute data-src dan attribute src di ubah dengan kode gambar base64 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 cara di atas gambar di postingan otomatis support lazyload tetapi harus di lakukan secara manual dan harus selalu menggunakan format penulisan seperti itu saat ingin menyisipkan gambar di artikel.

dan jika cara manual hanya bisa menggunakan lazyload pada gambar ke2 dan seterusnya, gambar pertama tidak bisa menggunakan lazyload karna menyebabkan thumbnail di homepage jadi blank.

dengan menggunakan script yang saya bagikan di bawah ini, semua gambar yang ada di dalam artikel akam otomatis support lazyload termasuk gambar pertama tanpa menyebabkan thumbnail di homepage jadi blank.

jika sebelumnya kamu sudah terlanjur menggunakan cara manual tidak perlu mengubah apapun biarkan saja tetap begitu, karena script ini tidak akan berpengaruh dengan tag img yang memiliki attribute src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

Script Lazyload Otomatis Gambar Di Artikel

silakan salin script di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; , jika sudah jangan lupa untuk klik simpan.

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

ok jadi sekian script lazyload otomatis gambar di artikel yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :
tutorial blogger

15 komentar

  1. Thanks!
    1. ok
  2. Mas wendy juga menerapin cara ini ya saat buat artikel di blog juga ๐Ÿ˜…
    1. iya mas dulu manual cuma jarang2 juga. kecuali artikel yang banyak gambarnya.

      sekarang pakai js aja biar gk perlu manual lg ๐Ÿ˜
  3. informasi dari igniel,com tidak merekomendasikan lazyload di image artikel mas.
    1. mungkin gambar jadi tidak terindex gk sih mas alasannya?

      saya juga kurang tau sih apa bisa menyebabkan tidak terindex gambarnya nanti.

      atau jika emang gitu mungkin bisa lewati gambar index 0 jadi var i = 0 di ubah jd var i = 1, biar yang lazyload dr gambar ke dua dan seterusnya mungkin akan lebih baik yang penting gambar pertama thumbnail artikel ke index ya
    2. mungkin kurang lebih seperti itu. dalam pemuatan src yang ditampilkan adalah
      data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

  4. Di related post gambatr gak muncul ya
    1. related post uda otomatis lazyload tanpa menggunakan script ini, script ini untuk gambar yang ada pada dalam artikel
  5. mas sy ubah sedikit kode nya untuk support tag script bisa gak ? soalnya buat lazyload iklan dari mgid mas.
    1. kalau mau ubah itu yang script lazyload adsanse atau script lazyload js lainnya, ini js hanya menambahkan class dan attribute secara otomatis pada gambar agar tidak manual, karna script lazyload sudah terpasang di template ini hanya memanggil fungsinya aja
  6. Maaf out of topic. Cara biar gambar pas disroll atau jempol ada di atas gambar gak muncul biru-biru gimana ya mas? Jadi kayak scrool text gitu. Aku udah terapin cara biar gambar gak bisa diklik, tapi bagian biru2nya gak mau hilang. Huhu, penjelasanku muter2. Semoga paham.
    1. kalau ada tag a pasti ada warna birunya saat di klik tahan, itu tidak bisa di hilangkan kecuali tag img aja tanpa tag a
    2. Cara hilangin tag a bagaimana ya mas?
    3. <div class="separator"><img alt="judul" src="xxx.png"/></div>


image quote pre code
© Wendy Code

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english