Cara Memasang Lazy Load Di Blog
Cara Memasang Script Lazy Load Di Blogger
Lazy Load adalah sebuah plugin yang memungkinkan Blog Anda lebih cepat melakukan loading dibandingkan sebelum menggunakan lazy load. Awalnya lazy load hanya diperuntukkan untuk WordPress tetapi lama kelamaan lazy load sudah tersedia untuk para blogger. Lazy load hanya berfungsi untuk akses yang dicari saja, jadi dia tidak memberatkan beban dengan terjadinya loading yang terlalu lama.Alasan Anda harus menggunakannya adalah dengan menggunakan lazy load, situs yang Anda miliki akan lebih cepat load di saat pengunjung mengunjungi situs Anda. Biasanya mungkin situs Anda mengalami load selama 1 detik, dengan menggunakan lazy load akan menjadi lebih cepat contohnya menjadi 0,3 detik. Plugin ini juga baik untuk meningkatkan site speed.
Cara memasangnya
A. buka template blogger > Edit HTML > Cari Code </body> Tempelkan Code dibawah ini tepat di atasnya code </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/AVvXsEg_uqh2RJUAHcNjo4QC4LI6WNgIPcUGd1vezsy_AdRkOUD3xkw4pmg0-DWXUQPYI8Z_D9e9ThBYEUQJkX9kW9ZswKvf_t6CUt4nt2Yzjy7HvmRIoomgQm5cVYjQ9MbyO-pmVJQSfs2R5fk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>
Simpan Template Dan Lihat Hasilnya :)
0 Response to "Cara Memasang Lazy Load Di Blog"
Post a Comment
Ingin Berdonasi Kepada Kami? Anda bisa menyalurkan donasi anda melalui PULSA/GOPAY/OVO CASH Kepada Nomor Team Kami Yaitu ( 0823-7775-4543 ) "Ayokmoco.com"