Cara Memasang LazySizes Di Blog

Cara Memasang LazySizes Di Blog
pada kesempatan kali ini Cybertips akan berbagi tips Cara Agar Memasang Lazy Load Di Blog.
ada banyak cara agar bisa mempercepat loading pada blog kalian masing-masing dengan cara memasang plugin lazy load, pada kesempatan kali ini saya akan berbagi tips ini untuk kalian para blogger dari sabang sampai merauke.
tips ini termasuk salah satu dari optimasi blog dengan plugin jQuery Lazy Load untuk meringankan loading pada blog kalian masing-masing.

jika kalian tertarik untuk memasang plugin jQuery Lazy Load untuk meringankan loading pada blog kalian, silahkan ikuti langkah demi langkah sebagai berikut:

  • 1. Login Terdahulu Di Blogger.com Lalu Masuk Ke Menu Template dan Klik Edit HTML. selanjutnya tambahkan kode dibawah ini sebelum tag penutup </body>
  • 
      <script>
    //<![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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
    //]]>
    </script>
    
  • 2. Lalu Klik Simpan Template Dan Lihat Hasilnya.

Berikut Adalah Tips Cara Memasang Lazy Load Di Blog.
Semoga Bermanfaat

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post