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 :
Tidak ada [DEMO] untuk tutorial kali ini, anda bisa langsung terapkan di blog anda dan rasakan efek pada blog anda.
Screenshoot :
Bagaimana 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>
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/AVvXsEiQuhCajoSSRd4dMqVcdYuK7nRguplnAhq85bSW6G2_CKbhEzYlBoXDw9_dXXbxgXPk8JpHbHEXcUgzQe4iJgD68hpvUi-dli8hPEJUWl2UpMC3wJS4XygeH-BPWCaztL9NHVGLDz6hqR8/s1600/loading2.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
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 : Bagaimana Mempercepat Loading Blog dengan LazyLoad di Blogger
EmoticonEmoticon