Cara Pasang Lazyload IMG di blog

Avatar mrusfy.com Februari 1, 2020 0 Comments

Mengapa loading blog kita harus cepat?
jawabannya tentu karena pengunjung blog kita tak mungkin menunggu lama saat hanya membuka satu halaman dari blog kita.

Bagaimana cara mengatasinya ?
nah tepat sekali, kali ini saya akan membagikan bagaimana caranya mempercepat loading blog kita agar pengunjung tidak merasa bosan dan tidak mau mengunjungi blog kita lagi.

Berikut beberapa cara untuk mempercepat loading blog kita

1. Pasang script lazy

Dengan menggunakan script lazy makan loading blog kita akan terasa semakin kencang, ini akan membuat visitor tidak bosan di blog kita karna fast loading.

Berikut adalah scriptnya :

<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/s1600/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

copykan script di atas sebelum </head>  dan simpan

2. Batasi penggunaan widget

Penggunaan widget yang berlebihan bisa saja memperlambat loading blog kita

3. Optimasi gambar

Disini maksudnya kita tidak beleh menyisipkan gambar pada postingan kita, tapi kita harus menentukan ukuran gambar agar ukuran filnya tidak terlalu besar, atau kita mengecilkan ukuran pixel dari gambar tersebut.


Itulah beberapa cara untuk mempercepat loading blog kita agar lebih fast dan tidak membuat pengunjung merasa bosan berlama-lama membaca artikel di blog kita.

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *