Speedup Blogger Blog using Image Lazy Load Script !


Many of Bloggers on the Internet looking to Increase their Blog / Website Speed Because it is now the Main Concern that People Mostly Move to Specific Websites that Load Faster. So You need to Compete with this Website So, You have to do some Changes in Your Blogs to Boost Your Loading Speed. In This, We can Teach You that How You can Load your Blogger Blog’s Images Faster with a Little Trick. It is a Small Script you can Easily Found on the Internet Called “Image Lazy Load Script” It is also Available for WordPress Users in a Form of Plugin.

Related – SEO Image Optimisation of Blogger for Search Engines.

People on Internet Having High-Quality Website have Poor Loading Speed Due to High Traffic So you need to Fix it and Optimise your Scripts, Images and Other Things of your Website. 90% Visitor does not come Again to Your Website If your site takes 1-2 Minutes to Load. People Attracted to Websites that Load Faster. It can Save your Visitor Time & Money.Sppedup your Blogger Blog Image Lazy Load Script

Let’s Take an Example – We Already Know that Labnol.org is a Tutorial & Tech Sites When you Hit Search on Google You can Definitely Click on Labnol or ShoutMeLoud Like Sites because you already know that These are the Elite Sites and Load in Few Seconds. Bloggers are Blowing their Money to Host their Files on CDN’s But In Blogger Platform You can Increase your Image Loading Speed Just by Little Script.

Steps to Add Lazy Load Script in Blogger :

  1. Login your Blogger Account and Choose a Blog in Which you want to Use Lazy Load Script.
  2. Then Choose “Template” Option you find in your Left Hand Side.
  3. Click on Edit HTML and you Template Code is Open Where You need to Find </head> tag  by Pressing CTRL+F Key and Paste Below Lazy Load Script Above the </head> Tag.
  4. After Adding the Script Click on “Save Template” and all is Done Successfully.
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>

NOTE : Above Script is Only to Increase your Blogger Image Loading Speed But There is One Disadvantage of the Script that Once you add this Script person Who Disable Javascript on their Browsers Can’t Able to See Pictures in Your Blog Post. So This can Solve your Confusion related to This Script.

What This Script Can Do ?

Who Still Not Use this Lazy Load Script Need to Read that How This Script Increase your Image Loading Speed. Read Carefully, This Script Only allows loading that Image that is Currently shown in your Browser Screen only Not Full page. So if you have Four Images on your Post and Your Browser only able you to show two images. So These two Images is loaded Instead of Four Images. When You Scroll Down that Webpage. Other Two images will also Showed.

From Editor’s Desk :

Guys We Already Post Many of useful Blogger Tutorial and Blogger Widgets that help Bloggers to Improve and Customize their Blogger Blog in a Professional Way. Apart we also Post about Blogger SEO that many of newbie Blogger Must Need to Read. I Hope you Enjoy our Article If you face any type of Problem related to this Article So Just Comment it Below.


Please enter your comment!
Please enter your name here