How to Add Lazy loader for Images in blogger [blogspopt]

How to fix defer offscreen images, How to apply to defer offscreen images in blogger, WordPress, Blogspot, How to apply to defer offscreen images on the homepage of blogger, How to fix Lazy loader, How to apply Lazy loader for images in blogger, WordPress, Blogspot, How to apply Lazy loader images on the homepage of blogger, is defer offscreen images and lazy loader are same things

Images In our blog play an important role it fascinates the reader and helps them to correlate with the content. Images prove to be very helpful in explaining the technical steps. Evey blogger uses images in their blog to make it more helpful for their visitors to make our blog attractive and it creates a very good impression on our blogs. But images often account for and take lots of spaces which results in the 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. Every blogger is always suffering to reduce their Images and spent hours working, trying to reduce the size and bytes of your images, using some software or any third party's online methods.

So, in this tutorial, I have brought a permanent solution for this problem Here you can easily learn how to Add "Lazy loader for Images in blogger"[blogspopt]. It is also known as Offscreen Image which helps you to reduce the page loading time of your Blogger blog and boost it by simply adding a JQuery scrip

What Is Lazy Load Images

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. In simple language you can say that image loading become lazy it means when any page is load the only images are lode which is present on the screen and as you scroll down then only the rest images on the page will load this automatically increase your page speed and lower your page loading time which is very essential for any blog as if any website takes much time to load visitor get irritated and leave the site, so it is very important to always provide the best service to your readers.

Importance Of Lazy Load For Images

1. Makes your site loads faster and thus it left google Impact on Search Engines like Google, Yahoo, etc.
2. Makes your website performance increases by reducing your loading time and site’s bounce rate

How To Add Lazy Loader For Images In Blogger [blogspot] 

Step 1. Log in 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 Facts Byte In Journal --> <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> <!-- factsbyteinjournal.blogspot.com--> 

  Read More: GOOGLE ADSENSE ACCOUNT APPROVAL PROCESS - 2019

Now your Lazy Lodeer For Image Is ready when your visitors will scroll down your blog your site images will load with animation effects one after the other.

If this tutorial has helped you in optimizing the speed of your blog. let me know in the comment box how much your blog's page loading speed increases?
And don't forget to share this with your friends.