Cara Memasang Lazy Load Untuk Percepat Loading Blog

Lazy Load adalah sebuah script kode yang berhubungan dengan proses loading gambar pada situs blog.

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

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

Untuk menggunakan script ini juga tidak terlalu sulit, anda hanya perlu memasukkan script kode lazy load sebelum kode penutup </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 kode dibawah ini, sebelum 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/AVvXsEi9uONcIVMlTm6kNIS6K_W9JR3bF1XFV1me4d6gHhoEx0Txk50D8jKh2pWM-mc_mKP4FDJJR8bvZtlAfDcl0RTsnr6jtnppFbGrXXPAA5IpU3A-E4a08wcL8sB1hpshUIS6o-mZTzuQRfVJ/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

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

Itu dia cara mudah memasang lazy load pada blog. Script ini memang dapat meringankan loading blog, namun yang perlu anda ketahui adalah bahwa script ini tidak cocok pada semua template blog.

Jadi apabila anda telah memasang script lazy load, namun loading blog semakin berat, maka saya sarankan untuk menghapus kode tersebut.

Tweet

Subscribe to receive free email updates: