(6445) Cara Mempercepat Loading Blog dengan LazyLoad di Blogger

Lazyload adalah sebuah JavaScript yang bisa memberikan efek pada blog anda dan mempercepat loading blog anda. Buat blog anda yang kebanyakan menggunakan JQuery dan JavaScript, Tutorial berikut ini sangat cocok buat anda. Perlu diketahui juga bahwa JQuery dan JavaScript dapat memperlambat loading blog anda, oleh karena itu jika anda ingin mempercepat loading anda gunakanlah LazyLoad pada Blogger anda. Dengan menerapkan LazyLoad pada blog anda, anda akan merasakan sendiri efeknya dan secara perlahan-lahan loading pada blog anda akan cepat.

Tidak ada [DEMO] untuk tutorial kali ini, anda bisa langsung terapkan di blog anda dan rasakan efek pada blog anda.

Screenshoot :

Cara Mempercepat Loading Blog dengan LazyLoad di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode </body>
2. Copy&paste kode beriktu ini, dan letakkan di atas 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/AVvXsEiJOMGK4IQ4rhQ10X0TtokR55EYCza-TJLMcrHoYAXDcYtpaNX1sb7sSF3bGVotN__g8blqP2m78V7WKYCL78-Kglk89az1j-T6Iwa9CfNryiGi3mcpfatm8UQyC5sPkWHsAscBD31OEhg/s1600/loading2.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

3. Simpan Template!

Demikianlah Tutorial Blogger kali ini, bila ada yang ingin ditanyakan, silakan komentar dibawah ini. Terakhir, silakan lihat homepage/postingan anda maka loading blog anda menjadi cepat. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : (6445) Cara Mempercepat Loading Blog dengan LazyLoad di Blogger

Share this post

Related Post