Cara Mempercepat Loading Gambar di Blogger Dengan Lazyload

Ciyonk - Untuk Anda yang memiliki situs, sudahkah Anda merasa bahwa situs atau blog Anda cepat ketika loading. Apabila situs Anda masih loading dan berat, mungkin cara berikut bisa Anda gunakan yaitu dengan menggunakan script yang bisa mempercepat loading gambar yang ada di situs.

Dengan kode script berikut gambar yang akan paling cepat terbuka adalah yang ada pada postingan, dimana dengan scroll mouse ke bawah maka otomatis gambar pun akan terbuka dengan cepat. Meskipun begitu pastikan juga bahwa koneksi Anda tidak lelet.

Berikut tutorial lengkapnya cara menambahkan plugin tersebut yang bisa langsung Anda praktekkan dengan mudah.

1. Masuk ke Dasbor Blogger.

2. Cari Template.

3. Pilih Edit HTML.

4. Cari kode </head> (Gunakan Ctrl+F).

5. Copy paste kode berikut di atas kode </head>:

<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2j_jT87TU-1YLnDRAgpYdcqS3XBcsSew6pLTDH9yRkQDdWvnJuUpHtz9dMM1_HTJDzeBNZX-t-YD3d7r7Vuk-HU0TBfbyZnhKo1fLlfNy2c8GQMdowSdBgqsdVxi-wZsovabH1IAaFP4/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

6. Simpan Template dan lihat hasilnya.

Mudah-mudahan script di atas dapat membantu meningkatkan kecepatan blog Anda. Dengan begitu pengunjung juga akan nyaman karena mereka bisa mendapatkan apa yang diperlukan.