Cara Memasang Lazy Load Untuk Percepat Loading Blog

2 min read

Cara Memasang Lazy Load Untuk Pecepat 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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/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.

Cara Memasang Kotak Berlangganan FeedBurner VioMagz

Salah satu jenis template blogger yang paling fenomenal ditahun 2018 ini adalah VioMagz. Template VioMagz ini merupakan salah satu template blog paling populer saat...
gawang123
1 min read

Hosting Adalah..? (Pembahasan Lengkap)

Membangun sebuah situs website merupakan salah satu cara ampuh dalam meningkatkan eksistensi di dunia maya, terlebih lagi bagi anda yang merupakan seorang pebisnis online....
gawang123
3 min read

Leave a Reply

Your email address will not be published. Required fields are marked *