How to Lazyload Images and Increase Blog Loading Speed in Blogger - Curious CORP

Friday, July 19, 2019

How to Lazyload Images and Increase Blog Loading Speed in Blogger

Most of you know that blogger is not as fast as WordPress when it comes to blog page load time. Wordpress has many plugins like WP rocket which enhances the blog page loading speed. Blogger doesn't have anything like that.

But...

There are many scripts available for blogger which are pretty much similar to what plugins do in WordPress.

Lazyload image loader is one of those important plugins in WordPress which is also available as a script for blogger. 


Lazyload images in blogger


What is lazy load ?

when you have surfed around all web pages on the web you must have seen some websites or blogs which uses wordpress has a very cool effect that, when you scroll down the page the image loads with a fade-in effect. 

That looks cool and very interesting.

But that slow loading images is not only for show.

The main aim of lazy loading images is that to decrease the load time of the blog. 

The images in a blog are a big part of the blog or have a very large size so if you are using too many images in your blog it will take more time to load the whole page. 

Lazy load images will only load the images at the point of the page at which visitor is is viewing. 

It will not load the other images that are below the fold if users have not scroll down, if the user scrolls down then only the images will be loaded. So this saves the the bandwidth and load time is reduced because all of the images are not loaded only the images are loaded which are required at that time.

This is known as Image load differing.

How to install lazy load in blogger blog?


  • Go to to blogger
  • Go to templates
  • Click on the edit button
  • Copy the below script and paste it above the ending </body> tag.

</script>
<!-- lazy load by thecuriouscorp.com start -->
<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>
<!-- lazy load by thecuriouscorp.com end -->

  • Save the template.

You will see e that images on blog are loaded asynchronously and not every image is loaded until you scroll down.



Conclusion

This small JavaScript which is similar to the lazy load plugin in WordPress will help reduce the blog loading speed by differing all the blog images. 

See if the code works for you, it is not sure that it will work in every custom template of blogger.

No comments:

Post a Comment