GeneratePress 7 Years Celebration! 🔥 Get up to $30 off 🔥

Make Your Blogger Blog Faster With Lazy Load Image Script

Don’t you hate it when websites load slowly? I know you 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 factors that affect blog load time. So, To reduce blog Image load time, today I have brought a lazy image loading plugin for bloggers!

Lazy Load is a jQuery plugin that only loads Images seeable in the viewport (visible part of the web page) thereby enhancing the Page Load time. The images which are out of the initially visible region of the screen are loaded as the user scrolls through them. A really useful plugin for Image intensive Blog. This widget really decreases the 50% of blog load time as you check your own blog with GTmetrix. Let's see the working of this plugin.

How to Install this Plugin to Blogger?

  • Login to Blogger > Dashboard> Select the blog
  • Click on the “Template” Menu

Note: “Backup your Template” before making any changes to your blog.

  • Now Click on Edit HTML > Proceed
  • Click inside the blogger template editor and press Ctrl + F and search the code shown below.
</head>

Copy below codes and paste above </head>

<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://2.bp.blogspot.com/-qSZoOgvUXnc/UPAdKvmulFI/AAAAAAAAAlk/-etkAoXTe1s/s1600/truebloggertricks.blogspot.com.gif”,effect:”fadeIn”,threshold:”-50″})})//]]></script>
  • Now just press on the save the template and refresh your blog.
  • Now just scroll your blog and see your images fade in with a lazy loading effect.

If you have any doubts regarding this post, Please ask it via comments, and Do not forget to share this post with your friends!!

Previous Article
How to Setup CloudFlare Free CDN in WordPress
Next Article
Most Common Reasons for 500 Internal Server Error

Thanks for choosing to comment on this article. A name and email address are required to post a comment. The email address is not publicly visible or shared. Please keep in mind that comments are moderated according to our comment policy.

Leave a Comment