How To Install Jquery Lazy Load In Blogger

0 /

Also Read...

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 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
(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:"",effect:"fadeIn",threshold:"-50"})});//]]></script>

Step 4. Now Save your Template..Done ! 
learn trick to install add jquery javascript lazy load plugin in blogger template.Tutorial on installing adding lazy load function in blogspot themes to increase the website loading speed fast.
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...

learn trick to install add jquery javascript lazy load plugin in blogger template.Tutorial on installing adding lazy load function in blogspot themes to increase the website loading speed fast.


We hope this article helped you to learn How To Install Jquery Lazy Load In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+


Post a Comment Blogger Disqus

0 Comments on "How To Install Jquery Lazy Load In Blogger" So Far - Post Yours!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand