Widget HTML #1

Cara Memasang Script Lazy Load untuk Percepat Loading Blog

Cara Memasang Script Lazy Load


Jaringan Sibuk - Selamat datang kembali di blog Jaringan Sibuk, pada kesempatan kali ini Admin akan membagikan Script Lazy Load.

Bagaimana cara menggunakannya? Silahkan disimak ya mengenai Cara Memasang Script 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 di bawah ini:


  • Pertama-tama buka situs blogger.com
  • Pilih Tema >> Edit HTML
  • 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/AVvXsEiTBjovFgSa4VfJDRzBsa9DCLvun2NUaH0CSlDlRre-7gfQZMGtP_YWoSTnUk7jXbpcIWVLhMFAGIerMPca0kixg5dlw5dMhD9QTflcWrGu-hBN5ot9qyGnRndPm8Nk6TxKXgSIXApTJb3W/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>


  • Terakhir Simpan Tema, dan cek blog anda untuk mengetahui hasilnya


Demikianlah Cara Memasang Script Lazy Load untuk Percepat Loading Blog yang dapat Admin bagikan kali ini. 

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.

Terima Kasih dan semoga bermanfaat.

Post a Comment for "Cara Memasang Script Lazy Load untuk Percepat Loading Blog"