How To Install Jquery Lazy Load In Blogger

how to add lazyload java script trick in blogger template to increase website speed
Do you know what is jquery lazy load? Lazy Load Script is installed in your Blogger template? Don't worry if it's not installed we are going to share jquery lazy load script trick to increase the website or blog page speed.That means when you install lazy load in your blogspot theme you blog speed will surely increase on loading,after installing you can see the instant effect on page load.Lazy load plugin for images will delay the image loading result your website speed will increase.Still there are lot's of ways to speed up your blog faster.

However this plugin will work with your website and its blogger template friendly.If your website have too many images so in this case lazy load plugins is best for your blog.However you can use different ways to increase the page speed.in next post we will surely explain different methods for make your webpage load fast.The important factor to use this jquery lazy load trick if you are using to many graphics in your posts/article then it's sure your page speed will get down so in this case you need to increase the page speed and for that you must install lazy load script in your blogger template.So to grab this trick just follow the steps mentioned below. 

How to Add Jquery Lazy Load Script In Blogger Template To Increase Webpage Loading Speed

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now go to Template -> Edit HTML.
Step 3. Now Search for the closing </body> tag and copy the below j query and paste above/before </body> tag.
<script type='text/javascript'>
// Jquery LazyLoad Script by www.Bloggersstand.com
//<![CDATA[
(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/AVvXsEieg_W2QlSfJgHaare0krt5lZN5fhuu0Sdchf2T7hO99-YqsL325tXmoimNJ0EaYYZ3-rtEncYfRvhN2wwnfezRA-8MkinWbHMuPXESX-cMrBQXvjhzuSkqK1XUMy60ccE9aWP1z1ARozk/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

Step 4. Now Save your Template..Done ! 

Post a Comment

0 Comments