Item: How to lazy Load Images on Website or blog
Author: M.Muzammil

How to lazy Load Images on Website or blog

I have already posted on my website that how you can lazyload AdSense ads it's very easy to lazy load AdSense ads like lazy loading images.

Do you know that Google loves that websites that have very low loading time or load faster and if you wanna make your site load faster I have already posted in article about it and today in this article I am going to tell you how you can lazyload images to decrease your website load time.
Lazy loading images helps you to decrease your website load time and the functionality of this lazy loading jQuery plugin as it will search for the images and load that images on request for example it will not load all the images on page load it will load the images as you scroll down to that image.

If you are having too much images on your website then you have to use this plugin because this will help you a lot.

So if you want to install this lazy loading images functionality on your blogger blog follow the steps which are provided below and do it as it is said.

Steps to Add Lazy Loading Functionality:

Go To Blogger Dashboard
Then Go to Theme / Template
Click Edit HTML Button
Now search for </head>

To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.

Now copy the code provided below and paste it just above the tag which we have founded in step 4.

<script>
//<![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://lh3.googleusercontent.com/-fmX66IzCqrs/XFKVdJY4JZI/AAAAAAAAAjY/uqON7yBHrkUxE7Ca_TPfj6jWt5hUigU7ACLcBGAs/Rolling-1s-200px.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>

In the above just replace the highlighted image URL with your own image.

Save Theme / Template.

Conclusion:You are all done and you have just added a functionality of Lazy loading images in your blogger blog and it is very much helpful to rank your site high in Google by decreasing your website page load time and I hope this tutorial help you a lot now go and test it.

M.Muzammil

I am a web Designer & Graphics Designer. I love to program and design. Sharing knowledge is my passion & Programming is my Hobby. Want Help? Contact Me its free.!

How to lazy Load Images on Website or blog