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.
You might have spent hours working, trying to reduce the size and bytes of your images, using some software or other online methods.
You might have spent hours working, trying to reduce the size and bytes of your images, using some software or other online methods.
So, in this tutorial, you will learn how to reduce the page loading time of your Blogger blog and boost it by simply adding a JQuery script within 2 simple and easy steps.
Benefits of Image Lazy Load for Images
Using Image Load will make your content and other important parts of your blog before images are loaded. So,
The page flow of your site makes your images appear but loads slowly when your entire page contents are loaded.
Makes your image heavy blog with all prefetching and loading of images that your visitors might not have even seen and thus your blog does not need to suffer.
Makes your site loads faster and thus it impresses Search Engines like Google, Yahoo, etc.
Makes your website performance increases by reducing your site’s bounce rate.
If your site is heavy visual then using Image Loader will especially be helpful.
Check out here: What IIlya Grigoril, a Developer Advocate and Web Perf Guru of Google says about image optimization, So,
More: How to add the LinkedIn profile in Blogger
More: How to add the LinkedIn profile in Blogger
How to Add Lazy Loader for Images in Blogger
Follow the simple and easy to understand steps below and you will be done within no time.
Step 2. Search for </head> tag and paste the below code just before the </head> tag.
<! -- Image Lazy Loader Script by Wonder Krish --> <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:"https://about-tutor.blogspot.com//search?q=create-social-content-locker-in-blogger" target="_blank">How to break long posts into multiple pages in Blogger
Conclusion for Blogger Image Lazy Loader
As it is totally a JQuery script, when your visitors will scroll down your blog your site images will load with beautiful animation effects one after the other.
If this tutorial has helped you in optimizing the images of your BlogSpot blog. Or if you have found any difficulty then you may leave a comment below and I will get back to you.