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.
How to lazy Load Images on Website or blog
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.
How to lazy Load Images on Website or blog
Steps to Add Lazy Loading Functionality:
- Go To Blogger Dashboard
- Then Go to Theme / Template
- Click Edit HTML Button
- Now search for </head>
- Now copy the code provided below and paste it just above the tag which we have founded in step 4.
- Save Theme / Template.
To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.
How to lazy Load Images on Website or blog
<script>
//<;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.
Conclusion: