Speedup your Blogger Blog with Image Lazy Loading Script

While surfboarding ShoutMeLoud.com, simply detected that Google decides your PageRank consistent with your blog’s speed. I’m positive that your’re usually awake to your blog speed. It helps to decrease your blog’s bounce rate by higher your guests. So, this text is regarding however you'll be able to truly speed up your blog with lazy image loading plug-in. It’s a script that helps to load your pictures once scrolled over. conjointly helps to avoid wasting your blog’s bandwidth and http requests.

Before you put in this lazy load image plug-in in your Blogger blog, lets walkthrough a demo. I’ve by currently additional this script to my demo blog that contains 1920 x 1080p Full HD image with none compression. Slightly visit following link universal resource locator or below Free Live Demo pic and you'll be able to see the image masses quicker once you scroll, just about when the blog has absolutely loaded. | Demo Lazy Load Plug-in: http://goo.gl/lIuik

Please Note: simply few days agone, Blogger developers has tweaked some advanced options in Blogger templet markup language editor. If you’re a initiate Blogger, avoid invalid clicks on Format templet, Revert changes and Revert contrivance templates to default buttons, if you’re victimization high customised Blogger templet. currently let’s see the way to install this script in your Blogger blog, follow the steps provided below:

• Go to Blogger Dashboard » Template
• Backup your Blogger Template before making any changes (How Backup Blogger Templete)
• Click on Edit HTML
• Click anywhere in Edit template section | See a screenshot

• Press Ctrl+F and search the code shown below

</head>

Important: You can’t able to find the above code if you’re using old Find bar. That’s why I mentioned to click anywhere within Edit template section to search the above code in its own Search bar. And if you’re still in doubt, able to see the image screenshot with quick guidelines via next link URL. | See the screenshot

Now copy & paste the below code just Above/Before </head> tag [use Ctrl+F to find the code].

<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>

Also see:

Custom Robots.txt Setting For your Blog

As always, Preview (able to examine your model Preview within the same window wherever you already put in the script) your Blogger model and if you’re blog load quicker than ever before, click Save model and you’re additional the lazy load image plug-in with success. currently it’s it slow to feed us together with your valuable suggestions via comment provided below. Thanks...!!!