Cara Pasang Lazy Load di Blogger

Deny Listianto    5 Februari 2018

Hallo para blogger, kali ini saya akan berbagi plugin untuk mempercepat loading blog. Mengoptimalkan kecepatan loading blog itu penting untuk pengunjung blog dan salah satu cara agar mempercepat loading blog dengan cara menambahkan atau memasang Plugin Lazy Load di blog kita.

Lazy Load untuk kita para pemula sering di sebut Effek Loading Gambar di blog, yang bisa di artikan sebagai sebuah plugin atau script yang dibangun dan dikembangkan khusus untuk platform Blogger.

Fungsinya untuk menunda pemanggilan objek ketika objek masih belum dibutuhkan. Dengan kata lain, gambar, video, dan komponen lain yang ada dalam blog tidak akan dimuat sebelum anda menyentuh atau mengarahkan kepada konten tersebut.

Sehingga dengan ini, loading blog akan sedikit berkurang karena hanya memuat halaman yang terbuka saja, ketika anda scroll cursor anda ke bawah, baru disini semua halaman akan dimuat secara keseluruhan.

Tentunya jika blog anda semakin cepat untuk diakses semakin berpotensi untuk menarik perhatian visitor karena blog tidak membutuhkan waktu yang lama untuk memuat seluruh halaman, sehingga para pengunjung pun akan semakin betah berselancar di blog anda.

Yosh, sudah menegertikan apa itu Lazy Load. Baiklah mari kita mulai cara pasangnya di blogger kita.

Cara Pasang Lazy Load di Blogger untuk mempercepat loading

1. Buka Dasbor Blogger sobat.

2. Pilih menu Tema lalu Edit HTML

3. Cari Kode </body> dan pastekan kode di bawah ini di atasnya.

<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(){$(".post img").lazyload({placeholder:"https://2.bp.blogspot.com/-sfHulA4OdIk/WnhzaXJZ9CI/AAAAAAAAACw/wRDXk4QGA5MtSVGkDfKClkDSbcNmIjfegCLcBGAs/s320/LazyLoading.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>

Anda juga dapat mengganti effek loadingnya dengan cara mengganti url yang saya tandai di atas dengan url gambar (.jpg,.gif,.png,dll) yang telah di upload

Tampilan Lazy Load-nya seperti gambar di bawah :

Ok, silahkan di coba semoga berhasil...