Cara Mempercepat Loading Blog Dengan Lazyload

KEYZEE Shared - Mempercepat loading blog bukan hal yang sulit,karena banyak tools yang bisa anda manfaatkan untuk mempercepat loading blog anda.kali ini KEYZEE Shared akan membagikan sebuah tutorial yang bernama Cara Mempercepat Loading Blog Dengan Lazyload , disini kita menggunakan plugin jQuery Lazyload untuk meringankan beban loading saat memuat halaman blog.

Maaf pada tutorial ini saya tidak menyediakan demo,silahkan bisa langsung dicoba saja.Berikut cara memasang scriptnya :

1. Masuk ke halaman Dashboard Blogger (Halaman Utama Blog)
2. Pilih blog yang akan dimasukkan script Lazyload,lalu masuk ke pilihan Template -> Edit HTML.
3. Cari kode </body>,lalu copy script dibawah ini dan letakkan diatas kode </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/AVvXsEhrQSMfoB6Bz-3WTB-2CgrvT_8f2XuaxHszhyNLHVz3FEuEdHppuN-s6KYZH4jvsIARRb2ZURZtjfFKQy37123d0C1k0O-7oXOz3Pnp-TQ7wK_4cylWqDOo58ddD-tqDziHjWJlXu30olps/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script> 

 4.Simpan Template,dan lihat hasilnya.

Tweet