Mempercepat Blog Dengan Cara Memasang Script Lazy Load

Published by Anonymous Thursday, October 24, 2019

Lazy Load Script

Blogger.id - Hello sobat blogger kali ini admin akan membagikan tutorial seputar Script Lazy Loading di blogger dan disini saya akan menjelaskan apa itu Lazy Load, Fungsi Lazy Load dan Bagaimana cara membuat script lazy loading di blogger.

Script Lazy Loading adalah salah satu JQUERY yang biasa digunakan untuk membuat penundaan gambar dibalik layar sebelum terjadi aktivitas aktif saat itu, atau istilah lainnya membuat gambar tidak akan terbuka sebelum di scroll oleh seseorang yang melihat gambar anda.

Banyak manfaat yang bisa kita dapatkan dengan memasang Script berikut ini di situs blog anda. Salah satunya adalah meningkatkan kecepatan loading, meningkatkan SERP artikel anda di google penelusuran dan 

juga memberikan pengalaman yang lebih baik lagi kepada pengunjung anda.

Cara Memasang Script Lazy Loading 

Berikut ini adalah cara - cara membuat, menerapkan dan memasang Script Lazy Loading di Blog anda. Sebagai pemberitahuan script ini adalah reupload dari situs Blog Arlina Desain.

• Buka dashboard blogger.com
• Selanjutnya klik theme, lalu klik edit HTML.
• Berikutnya cari kode  (</body>), untuk memudahkannya gunakan CTRL + F atau sebagai acuan biasanya Tag Penutup diatas ada dibawah sendiri.
• Selanjutnya Copy dan Paste Script Lazy Load tepat diatas Tag Penutup (</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/AVvXsEjCBbIv_4EmYkLaXkUQUJCfEWOx2-Qi38WfOf1-tE1V0Q-uHzr63KEg64jn8vSDmO91a6MbmNib8ICCc36xGdkuFmgtXE23yFKZV9Hy15BYKuvF7Kkh2yw3_9PKg4JNQrGJY-jmNQOypFpY/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

• Terakhir Klik Save Theme, dan anda bisa melihat demonya sendiri diblog anda

Akhir Kata dan Penutup

Demikian adalah tutorial singkat cara memasang script JQUERY Lazy Loading di Blogspot anda, selanjutnya jika ada kesalahan saat memasang Script diatas silahkan tanyakan di kolom komentar dibawah ini, Semoga artikel ini bermanfaat bagi anda.