Install Lazy Load Image Plug-in and Speed Up your Blog


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


lazy load plugin for blogger
While surfing ShoutMeLoud.com, just noticed that Google decides your PageRank according to your blogs speed. Im sure that yourre often conscious of your blog speed. It helps to decrease your blogs bounce rate by higher your visitors. So, this article is about how you can actually speed up your blog with lazy image loading plug-in. Its a script that helps to load your images when scrolled over. Also helps to save your blogs bandwidth and Http requests.

Before you install this lazy load image plug-in in your Blogger blog, lets walkthrough a demo. Ive by now added this script to my demo blog that contains 1920 x 1080p Full HD image without any compression. Slightly visit the next link URL or below Free Live Demo pic and you can see the image loads faster when you scroll, only just after the blog has fully loaded. | Demo Lazy Load Plug-in: http://goo.gl/lIuik


 Install Lazy Load Image Plug-in in your Blog
Please note: Just few days ago, Blogger developers has tweaked some advanced features in Blogger template HTML editor. If youre a newbie Blogger, avoid invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template. Now lets see how 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
  • 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 cant able to find the above code if youre using old Find bar. Thats why I mentioned to click anywhere within Edit template section to search the above code in its own Search bar. And if youre 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: How to Measure the Success of your Blog/Website

As always, Preview (able to see your template Preview in the same window where you already installed the script) your Blogger template and if youre blog load faster than ever before, click Save template and youre added the lazy load image plug-in successfully. Now its your time to feed us with your valuable suggestions via comment provided below. Thanks...!!!