Cara Memasang Lazy Load di Blog

Cara Memasang Lazy Load di Blog

Snippet

12.20

iNDZGN - Ada banyak cara untuk mempercepat loading blog, salah satunya dengan cara memasang plugin Lazy Load. Dan pada kesempatan ini, admin akan membagikan sedikit tutorial bagaimana caranya memasang lazy load kedalam blog kamu. Ini merupakan salah satu trik dari optimasi blog dengan menggunakan plugin jQuery Lazy Load.

Untuk mempraktekannya, silahkan langsung saja ikuti tutorial yang admin jabarkan di bawah ini.

Memasang Lazy Load di Blog

1. Buka Blogger>Template>Edit HTML>dan tambahkan kode di bawah ini sebelum </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/AVvXsEhJXlN2A3wGfyxdi7XjkwoB-5m0WnY0AMC-YKtAa3GGF2FzwkSiZ6eV5vjsH2O6pTr-Spdrss2Rlij4Ov0_DT9G5Tds8pch9itEY5WTu4wUkxB268GvtTaRmaOAli4_I__MYngpDfEHx1I5/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Simpan template kamu dan lihat hasilnya.

Demikian sedikit tutorial Cara Memasang Lazy Load di Blog, semoga bermanfaat. Dan jangan lupa bagikan artikel ini ke teman teman kamu lewat sosial media yang kamu punya. Terimakasih.

12.20