Cara Mudah Memasang Lazy Load di Blog - ACREZY

Dulu saya sering mengeluh soal loading halaman blog yang agak lama walaupun koneksi lagi lancar. Butuh beberapa banyak detik untuk blog selesai memuat. Hal ini juga sering dikeluhkan oleh banyak blogger di luar sana.

Kenapa? karena faktor pengunjung atau visitor betah mengunjungi halaman blog kita adalah loading yang tidak berat alias cepat. Kalo loading blog yang kita kelola berat, visitor mana yang akan datang? :D

Tapi semenjak saya memakai script Lazy Load ini, syukurlah jadi lumayan ringan. Saya rasa ini juga salah satu trik mempercepat atau meringankan loading blog dari sekian banyak cara di internet.

Apa itu Lazy Load?
Lazy Load adalah sebuah script yang menunda proses sebelum aktifitas tertentu dilakukan. Jadi script Lazy Load ini bakal menunda pemanggilan file sebelum kita melakukan scroll. Intinya sih kalo kita belum scroll ke bagian bawah nanti gambar yang ada di bawah belum muncul alias ketunda dulu.

Beberapa manfaat memasang Lazy Load adalah meningkatkan page speed dan mempercepat loading blog. Sudah banyak blogger yang memakainya, nah sekarang giliran kamu yang mencoba!

Memasang Lazy Load di Blog

---

Berikut ini cara memasangnya. Yuk simak baik-baik!

1. Pertama kamu harus masuk ke Blogger terlebih dahulu. Kemudian pergi ke menu Template/Theme terus klik Edit HTML.

2. Setelah itu tekan CTRL + F dan ketik </body> lalu enter.

3. Tambahkan kode dibawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNP4hbieQc_1JGo7bjqMkXuuGHWf-h0_C7bv6Lm4tlGV9bXax0C28fmbqUCzvwu1TtuHiS7__ilrhoEL3_aHhKts2eV99l2V4byP8ITnmA1ddpgBT_OcdFg9vNg5sikrc8PB7cq7hyphenhypheni-za/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Simpan template dan lihat hasilnya.

Selesai.

Untuk demonya sendiri kamu bisa lihat di blog ini. Saya sudah memasang Lazy Load di AcrezyBlog.

Sekian postingan kali ini semoga bermanfaat!