Cara Memasang Lazy Load Untuk Percepat Loading Blog

Lazy Load ialah sebuah script arahan yang berafiliasi dengan proses loading gambar pada situs blog.

Fungsi dari script lazy load sendiri ialah menghentikan proses loading gambar secara sementara, dan akan dilanjutkan apabila halaman blog telah di scroll.

Dengan begitu loading halaman blog akan lebih cepat, alasannya ialah tidak membutuhkan proses load gambar.

Untuk memakai script ini juga tidak terlalu sulit, anda hanya perlu memasukkan script arahan lazy load sebelum arahan epilog </body>.

Untuk lebih jelasnya mengenai cara memasang script lazy load, silahkan ikuti saja caranya dibawah ini:

1. Pertama-tama buka situs blogger.com
2. Pilih Tema>>Edit HTML
3. Salin arahan dibawah ini, sebelum arahan </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/AVvXsEgYiRzsnDtBmhOVLD4AHZmr5CPmw5KtMdJxFOapNiIatW1SKB7G1_6Azccx_VwPU-mquAMvT0lXKB-4MC1oA3C0QYVILQ4e3NyKnRXEkSIIWMGgC4ALS7uBwDqYgAfij-g5LH0zrqjr8jf7/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>

4. Terakhir Simpan Tema, dan cek blog anda untuk mengetahui hasilnya

Itu ia cara gampang memasang lazy load pada blog. Script ini memang sanggup meringankan loading blog, namun yang perlu anda ketahui ialah bahwa script ini tidak cocok pada semua template blog.

Makara apabila anda telah memasang script lazy load, namun loading blog semakin berat, maka aku sarankan untuk menghapus arahan tersebut.

Berbagi :