Easy Way To Add Lazy Loader for Images in Blogger

You might have spent hours working, trying to reduce the size and bytes of your images, using some software or other online methods.


So, in this tutorial, you will learn how to reduce the page loading time of your Blogger blog and boost it by simply adding a J Query script within 2 simple and easy steps.


Benefits of Image Lazy Load for Images


Using Image Load will make your content and other important parts of your blog before images are loaded. So,


The page flow of your site makes your images appear but loads slowly when your entire page contents are loaded.


Makes your image heavy blog with all pref-etching and loading of images that your visitors might not have even seen and thus your blog does not need to suffer.


Makes your site loads faster and thus it impresses Search Engines like Google, Yahoo, etc.


Makes your website performance increases by reducing your site bounce rate.


If your site is heavy visual then using Image Loader will especially be helpful.

How to Add Lazy Loader for Images in Blogger

Follow the simple and easy to understand steps below and you will be done within no time.

• Login to your Blogger Dashboard and Select Template/Theme and click on Edit HTML.

• Step 2. Search for </head> tag and paste the below code just before the</head> tag.

<! -- Image Lazy Loader Script by Pro Web BD --> <

script type='text/javascript'>//<;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> <!-- prowebbd.blogspot.com

-- >

Note: If you have disabled your JavaScript on your browsers then you will not be able to see the images of your posts. As the script is only to increase your Blogger image loading speed.


Conclusion for Blogger Image Lazy Loader


As it is totally a JQuery script, when your visitors will scroll down your blog your site images will load with beautiful animation effects one after the other.