Cara Membuat Loading Blog Lebih Cepat Dengan Lazy Load

Published by Aldi Pramudiya Jumat, 28 Juli 2017

Cara Membuat Blog Lebih Cepat Dengan Lazy Load - Kita semua pasti ingin blog kita fast atau cepat saat loading, apalagi mungkin kalian ingin mendapatkan nilai yang lebih baik dari hasil gtmetrix.com, Nah kali ini Wiki Farm akan berbagi sebuah Script JQuery Lazy Load untuk mempercepat loading blog kamu.

Cara Memasang Script Lazy Load

1. Buka Blogger Sobat
2. Pilih Tema, Lalu Klik Edit HTML
3. Tempatkan kode dibawah ini tepat di atas 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/AVvXsEg5OK2qFLzEAMdmc04_LUX-CHEfGgmAPaCZtT3RRqKxgtGIVtgQLCO7oNz5SRe0Aed3NurA_UUeY8BEgNCc8mkFJ4Wu3vehUyYXpgBQyZ-A6efS1tM13ompeduFYUy2fQ3DHrV4VTr-lRSu/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Dan setelah menempatkan script jQuery nya jangan lupa untuk menyimpan templatenya, Setelah itu lihat blog kamu lalu refresh lah dan lihat perbedaan kecepatannya!

Maaf tidak ada Demo untuk artikel ini, kalau mau cek saja blog agan setelah mencoba script lazy load ini :)