script 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 <!--</body>--></body> , 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.
16 komentar
sekarang pakai js aja biar gk perlu manual lg 😁
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
data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=