Make Your Blog Load Faster With Lazy Load Image Plug-in

              It is well known that images take the maximum time to load since they are much bigger in size.However,Google takes the page load time of your blog into account while considering ranking.

           So it is necessary to reduce the loading time of your blog.This is what Lazy Load Image Plug-in is all about and in this post,you will get to know how it works and how to implement Lazy Load Image Plug-in into Blogger.
 

 

How does Lazy Load Image Plug-in work?

           Images and text are loaded together when someone opens your blog.But this is completely unnecessary.Those images could be loaded later after the text has been loaded.This is what Lazy Load Image Plug-in does.

              It first allows all of the text to load,and then once the content is visible,it initiates the loading of pictures.This makes your blog not only fast,but also saves your blog’s bandwidth and HTTP requests.

Installation in Blogger

         Follow these steps to install  Lazy Load Image Plug-in into your blog.

1. Go to Blogger Dashboard and then click on Template.
2. Select Edit HTML.
3. Search for </head>.
4. You can use Ctrl+F to find for the code.
5. Now insert the following code just before the </head> tag.

<script type='text/javascript'>//<![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: "http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50";

})})//]]></script>

6.Now,first preview the template and then click on save.

7.You have successfully installed Lazy Load Image Plug-in into your blog.

         Do comment below,and tell us how it worked.