Script Menunda Pemuatan Gambar Posting Blogger
IwanBerbagi.com - Sebuah website tanpa gambar akan terasa hampa karena gambar menjadi salah satu pendukung pada sebuah artikel. Saya sekurang-kurangnya pasti memasang satu gambar pada setiap artikel yang saya publish. Karena dengan gambar tersebut akan memudahkan penyampaian informasi kita kepada pembaca.

Selain itu, gambar juga menjadi pertimbangan pembaca pada saat melihat artikel kita di home page website kita. Dan akan lebih berfariasi disana sininya. Apa lagi artikel saya kebanyakan merupakan artikel tutorial yang sangat memerlukan gambar guna menjelaskan lebih detail maksud dari artikel tersebut.

Dari faktor tersebutlah blog saya memiliki banyak gambar yang tentunya akan sangat menghambat loading blog jika tidak di optimasi. Nah pada kesempatan kali ini saya akan posting script yang dapat menunda pemuatan gambar tersebut, sebelum semua komponen blog terload dengan baik. Script ini saya dapatkan dari MasArif.com dan sudah saya pasang juga pada blog saya ini.

Memasang Script Defer Image For Blogger
Cara memasang script ini juga sangat mudah kok, kamu hanya perlu menambahkan script dibawah ini tepat diatas kode </body> pada template kamu.
<script type='text/javascript'>
//<![CDATA[
for (var imgEl = document.getElementsByTagName("img"), i = 0; i & lt; imgEl.length; i++) imgEl[i].getAttribute("src") & amp; & amp;
(imgEl[i].setAttribute("data-src", imgEl[i].getAttribute("src")), imgEl[i].removeAttribute("src"), imgEl[i].setAttribute("src", "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));
console.log(document.body.innerHTML);
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i & lt; imgDefer.length; i++) {
    if (imgDefer[i].getAttribute("data-src")) {
        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"))
    }
};
//]]>
</script>
Sampai disini simpan template kamu dan lihat hasilnya pada impact element, maka kamu akan melihat perubahan dari src menjadi data-src yang akan menjadikan gambar aslinya termuat setelah komponen blog termuat.
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed