Don’t you hate it when websites load slowly? I know I do. And to make matters worse, do you even come back to websites that load slow? The chances are, you don’t!.There are many factors But Images are one of the important factor that affects blog load time.So,To reduce blog Images load time today I have brought lazy image loading plugin for blogger!
Lazy Load is a jQuery plugin which only loads Images seeable in the viewport (visible part of web page) thereby enhancing the Page Load time. The images which are out the initial visible region of the screen are loaded as the users scrolls through them. A really useful plugin for Image intensive Blog's.This widget really decrease the 50% of blogs load time as you check your own blog with Gtmetrics.Lets see the working of this plugin
How to install this plugin to blogger?
- Login to Blogger > Dashboard
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML > Proceed
- Press Ctrl + F and search the code shown below.
</head>Copy below codes and paste above </head>
<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7DUsF1bDcnohmC6hyewzMCr5lRuwsJ6euv95s34ae1WcqOAZmF3QOfJHv0z9wOxyql2HTk3FfOYy8ke1WH0dQk9krje2ifaAztMj8W8KnzmiPKTyzDlmWq9OyXUbDT02K4uxye5eFse0/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
- Now just press on save template and refresh your blog.
- Now just scroll your blog and see your images fade in with lazy loading effect.
