Ad Code

Ticker

6/random/ticker-posts

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

Lazy Loader
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
Lazy Loader

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'>//<![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> <!-- factsbyteinjournal.blogspot.com--> 


  Read More: GOOGLE ADSENSE ACCOUNT APPROVAL PROCESS - 2019
Lazy Loader
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.

Post a Comment

15 Comments

  1. thanks for this valuable information i implement this in my website thankyou so much

    Education and technology

    ReplyDelete
  2. This presents itself fully suitable. Almost all these modest points were created in conjunction with great deal of heritage realizing. I adore that lots. images data entry

    ReplyDelete
  3. Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. I am Really very happy to say that this post is very interesting to read and keep it up bro.
    Virtual University Assignment Solution

    ReplyDelete
  4. Thanks for this it worked on https://www.naijastudio.com/

    ReplyDelete
  5. Thanks it was very valuable content but is it possible to prevent off screen images from loading always.

    ReplyDelete
    Replies
    1. I did get what you want to tell... BTW prevent loading images for always?.. better have no images

      Delete

Any Comment having the intention of spamming will not publish nor any irrelevant advertisment link will allow in the comment. Thanks!

Ad Code