Integrating Lazy Load into 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.



See Demo


How to add this into your Blog :

1. Login to your Blogger Account


2. Go to Design > Edit HTML ( For New Blogger Interface Go to Templates > Edit HTML )


3. Search for </body> tag and paste the following Code :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0pLOXif-Y5VeCZxmfvEplVugqvUSV4OxporeE5v5LYSjhuQNQaHpyYqCH3uG-dZxVrEwNdQQxrGPqoRJBpifBlDkw1zzfz8mWK_286cD8-34zN1pPLi6oEwcJ4oKPI39kpRYS51wHX9r/s1600/greys.gif"});
      });
  </script>

In case you experience blank Images in your Sidebar then try out this code :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $(".post-outer img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0pLOXif-Y5VeCZxmfvEplVugqvUSV4OxporeE5v5LYSjhuQNQaHpyYqCH3uG-dZxVrEwNdQQxrGPqoRJBpifBlDkw1zzfz8mWK_286cD8-34zN1pPLi6oEwcJ4oKPI39kpRYS51wHX9r/s1600/greys.gif"});
      });
  </script>

What the following code does is it limits the scope of Lazy Load to the Post Area excluding the Sidebar.


4. Save the Template and enjoy.


Skeptical about this Plugins Effects ,well check out the Results as measured by Gtmetrix.com 


With Lazy Load Disabled :

With Lazy Load Enabled :

You might not see much difference in the Page Size (About 40 Kb) but the Page Load Time has reduced by more than Half


If you still don't Beileve it try it for yourself. Just go to Gtmetrix.com

Lazy Load Disabled URL: http://www.demo.stylifyyourblog.com/2011/10/lazy-load-disabled.html

Lazy Load Enabled URL: http://www.demo.stylifyyourblog.com/2011/10/lazy-load-enabled.html


Have a Opinion ,Share It !

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox