Cara Mempercepat Loading Gambar Berkualitas Tinggi dalam Blog Dengan Lazyload Pure Javascript

6/26/2017
Biasanya cara yang digunakan untuk mempercepat loading gambar blog dengan memperkecil ukuran dan reolusi gambar. Cara ini sebenarnya akan mengurangi kualitas gambar itu sendiri sehingga kurang menarik jika dilihat.

Nah bagaimana caranya agar kita dapat menggunakan gambar berkualitas namun tidak mempengaruhi kecepatan loading blog?

Berikut ini cara mempercepat loading gambar blog dengan Lazyload Pure Javascript agar dapat menggunakan gambar dengan resolusi yang tinggi di blogspot. Ikuti langkah-langkah berikut:

1. Buka editor tempate Blogspot

2. Car kode </body>

3. Kopi kode berikut lalu paste tepat sebelum </body>
<script type="text/javascript">
//<![CDATA[
//LazyLoad Image
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Tambahkn class='lazy' dan rubah src='' menjadi data-src pada setiap gambar yang ingin dioptimasi lihat contoh berikut:
<img src=".../link-image-kalian.png">
<img expr:src="dataimagenya">

Rubah Menjadi

<img class="lazy" data-src=".../link-image-kalian.png">
<img class="lazy" expr:data-src="dataimagenya">

Atau Kalian Juga Bisa Merubahnya Jadi

<img class="lazy" src='.../link-image-resolusi-kecil.png' data-src=".../link-image-kalian.png">