How to make image lazyload on blogger blog

Hi, guys in this article I will explain what is the lazy loading image and how you can add the lazy loading image on your blogger blog. There so many benefits of the lazyload script. If you want to know deeply about lazyload then read the below program carefully.

When any user visits on your site all image of your site are automatic start loading and the user get a bad impression from your site because your site takes so much time to load.

If your blog time is high like my blog then it's so hard to rank on google but if you see your site loading speed increases for the image load then you can fix it by using image lazy load.

When anyone browses your site then if this person scrolls down then your site image is load so the full load time has digressed and it helps you lot for making your site super fast.

If you still face any problem then reload this page and see the network img tab of your browser.

How to add

Now let's talk about how you can add this script on your blogger blog. Follow all the below steps to install an automatic lazyloading image system on your blogger blog.

1. Open blogger dashboard
2. Go to the theme section then theme HTML edit.
3. Now search for </body> tag
4. If you want to search for anything on the theme then click on the HTML code then press Ctrl + F now you see a small search box opened, type your keyword, and hit enter.
5. Now paste the below code after the </body> tag
   

   <script>
   //<![CDATA[
   // Lazy Load
   (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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6DZ69-N0yNThtptEYEVAFPyTkejeWwzWD7pezIfUSeJ3WdBqmGHJIUjwO1OTt8X3wmP9IpkJzZHrxy5Nz1GLQPMK5pyoFdEtp3r4-nZTMujS0g3B_Ep9Q5zqWOoMLBJngBdM1E73MZrM/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
   //]]>
   </script>

6. Now save your theme.

That's How to Install Lazy Load on a Blog that Arlina Code can share. Thank you for visiting and greetings.