How To Add Lazy Loader For Images In Blogger

8 min read

Images make our blog attractive and it creates a very good impression on our blogs. But images often accounts and takes lots of spaces which results in slow loading of our website.

And if you are using a Blogger platform for blogging like me, then it becomes very difficult to have such a plugin as what WordPress users have.

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 JQuery script within 2 simple and easy steps.

More: How to create a Social Content Locker in Blogger

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 prefetching 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’s bounce rate.

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

Check out here: What IIlya Grigoril, a Developer Advocate and Web Perf Guru of Google says about image optimization, So,

More: How to add the LinkedIn profile in Blogger

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.

Step 1. 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 Wonder Krish -->      <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:"https://about-tutor.blogspot.com//search?q=create-social-content-locker-in-blogger" target="_blank">How to break long posts into multiple pages in Blogger

   
   
  
  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.
   
   
  
  If this tutorial has helped you in optimizing the images of your BlogSpot blog. Or if you have found any difficulty then you may leave a comment below and I will get back to you.