How to Add Lazy Load Images in Blogger

Lazy load in images is a hack to defer the initialization of images in a long web page. Images are not loading outside of the viewport until the visitor scrolls down it. Lazy Load helps you to speed up your blog and reduce the bandwidth as well. The bandwidth isn’t important in blogger because it is providing unlimited bandwidth, but the blog speed is very counted in these days, this an important factor in Google page rank. If your blog takes more time in loading then there are a chance to get the penalty from Google. So, always care about your blog speed, the lazy load can speed up your blog up to 5 to 10 percent. So, in this post, we are going to outline how to add lazy load images in blogger. In WordPress we can easily add this feature through plugins, but you know blogger isn’t supporting plugin, but we can add lazy load in blogger through javascript, in below I have shared a script to add this important feature in your blog.

How to add a lazy load image in blogger

1. Login into your blogger account if you have already signed in your then skip this step.
2. Go template and then edit the HTML
3. Search </body> tag by using Ctrl +f
4. Now Copy all Code below .

<script type='text/javascript'>
//<![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/AVvXsEgeJ6LXpnYXTO1WFAgkfgcxHjc_QWU4oCbmmuWUkLDLtGo7g_htYP_2VXZN6FF5p3TJPjUs_5-SUGk1pVqxXmddQPad0_d8lfNLvfNEozGpbEshJMM62X8ouGanz2nBT7EuX7OU1HNXi-ui/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

5.Paste the code just above </body> tag, and click on save button.

Now view your blog and check the result, hopefully, it will be working on your blog. However, if you have any questions about the adding a lazy load image in blogger then place your question in the below comment without any hesitation. We will try to guide you as much as possible. So, thank for visiting and please share this post with friends through social media.