Percepat Loading Blog dengan Script Lazy Load Animasi

28 Apr 2018 - - 10

Mempunyai blog yang cepat saat dibuka tentu sangat diidamkan, cara mempercepat loading blog juga banyak cara, diantaranya sudah pernah saya bahas pada tulisan "Kompres CSS Blog, Agar Blog Semakin Ringan", bisa juga dengan memperkecil ukuran gambar telebih dulu sebelum diupload di postingan blog, ini juga pernah saya bahas di tulisan "Cara Posting Gambar di Blog", dan berbagai trik lain supaya blog semakin cepat saat dibuka pengunjung.

Pada kesempatan kali ini, saya akan membagikan trik mempercepat loading blog dengan menambahkan script JQuery Lazy Load efek animasi loading. Berikut langkah-langkah penerapanya pada template blog anda:

Langkah #1
Login blogger.com dengan akun gmail anda

Langkah #2
Klik menu Template - Edit HTML

Langkah #3
Copy dan paste script lazy load di bawah 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/AVvXsEiMOKVeWyTs0q0UFrf9SuVlZ7S3mZBY0x3-k6hV0y_DI29FGIV7SpttwGlYL1GxEGom2b98hk8GZbnRTra5nf0AtWIxq5y-_Epqm7unk-DHHeoaQoF2gCl4Q7Us0sI_Tk5coX55Ih-uzDI/s1600/image-loader.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Langkah #4
Simpan template, dan silahkan anda lihat hasilnya.

Demikian tips Percepat Loading Blog dengan Script Lazy Load Animasi, semoga bermanfaat.