-->

Cara Memasang Lazy Load Image Untuk Mempercepat Loading Blog

Lazy Load Image

Cara Memasang Lazy Load Image Untuk Mempercepat Loading Blog - Lazy load image merupakan script atau kode yang dapat membantu mempercepat kinerja situs sobat. Sebenarnya script ini berguna untuk menahan laju loading image sebelum pengunjung menscrol halaman tersebut, agar situs sobat tidak terasa lambat ketika dimasuki pertama kali.

Banyak cara untuk mempercepat kinerja loading situs seperti halnya menggunakan plugin untuk pletfrom wordpress, compress image dan mengurangi widget dihalaman situs. Namun, di pletfrom blogger tidak dapat mengunakan plugin dan compress image pun tidak 100% meningkatkan kecepatan situs, apalagi gambarnya banyak di satu halaman tersebut.

Sebab itulah admin sarankan sobat memasang script ini di situs agar mengatasi masalah tersebut. Mungkin ada beberapa blogger masih kurang paham dalam pemasangannya untuk itu silahkan simak tutorial berikut.

Cara Memasang Lazy Load Image di Blog

Inilah cara pemasangan Lazy Load Image, sebagai berikut:

  1. Buka dashboard Blogger sobat.
  2. Pilih menu Tema > Edit HTML.
  3. Cari kode </body> dan salin script dibawah, kemudian letakan di atas </body>.
  4. <script type='text/javascript'>//<![CDATA[
    (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://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
  5. Terakhir, sobat Simpan dan rasakan perubahannya.

Script ini dapat meringankan situs sobat dalam menampilkan gambar dan mempercepat kinerja situs. Terkadang setiap blogger ada aja yang malas mengkompres gambar yang akan ditambahkan ke artikel, oleh sebab itu admin memberikan solusi ini.

Silahkan Sobat blogger coba lazy ini dan rasakan kecepatan situs ketika sudah dipasang script ini. Cukup sekian tutorial dari admin, apabila ada pertanyaan silahkan komen saja. Semoga bermanfaat, sampai jumpa dan terima kasih.