Mempercepat Loading Blog Dengan jQuery Lazy Load

Mempercepat Loading Blog Dengan jQuery Lazy Load – melanjutkan pembahasan sebelumnya mengenai tips trik mempercepat loading blog tidak hanya dilakukan dengan menggunakan satu cara saja, namun untuk lebih memaksimalkan loading blog kita bisa menerapkan beberapa cara. Dengan memanfaatkan jQuery Lazy Load untuk meningkatkan loading blog agar proses load image bisa semaksimal mungkin merupakan salah satu usaha yang cukup untuk membantu halaman blog tampil lebih cepat dari sebelumnya. Waktu yang biasanya digunakan untuk menunggu proses loading untuk memuat gambar yang biasanya tampil lebih lama, maka setidaknya jQuery Lazy Load bisa meminimalisir kemungkinan tersebut untuk memunculkan gambar yang terlihat pada halaman blog akan nampak lebih awal sedangkan load gambar yang lainnya akan bekerja apabila pada halaman tersebut kita scroll. Sehingga pada dasarnya jQuery Lazy Load memiliki cara kerja untuk menayangkan bagian gambar yang terlihat dari halaman blog terlebih dahulu untuk meningkatkan page load. Seperti apa langkah-langkahnya untuk menerapkan kedalam blog, berikut tutorialnya untuk cara Mempercepat Loading Blog Dengan jQuery Lazy Load.

1. Login ke akun blogger.
2. Masuk menu Template dan pilih Edit HTML.
3. Selanjutnya copy kode berikut ini lalu paste di atas kode </head>

<script type='text/javascript'>//<![CDATA[
(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/AVvXsEhfVJ_jdSdwC8uiJbYV4Zeeh1L69Ik7VfPgyKK3FFnsJYDHdzicUHUbeCDBSRdC_PDMxX6MTdm9hJ9iXXkZuufCmphnzdx_tOPd8PqneZ64U8egjr77ZsOW551M2imhbURiwST1S4uxwGg/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

4. Langkah terakhir Simpan Template.

Setelah terpasang kini beban load image menjadi lebih ringan dan waktu page load juga meningkat, sekian tutorial cara Mempercepat Loading Blog Dengan jQuery Lazy Load.