Integrating Lazy Load into Blogger

Lazy Load ImageLazy 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 : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/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 : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/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 !

30 Replies to “Integrating Lazy Load into Blogger”

  1. my featured content slider stopped working when i put Lazy Load's script.
    B-sides it looks stiff – i've seen way slicker alternatives of Lazy Load which fades the images when loads them (unfortunately i don't remember the name of it)

  2. @psydex
    Firstly make sure you don't include jQuery library again as it is already present in your blog

    if the problem persist then add the following code before the LazyLoad code

    <script type='text/javascript'>
    jQuery.noConflict();
    </script>

  3. @Prayag Verma
    Ugh , i always forgot to make sure not to double jQuery library. Thanks mate – that fixed the problem 🙂

    Can you tell me what's the name of a similar script (i've seen it elsewhere) which does the same job but fades-in the images?

  4. @Danialde4
    It is working, if you observe the vertical scrollbar, you will see it is larger when the page loads and becomes smaller as you scroll down and about the page load speeds, see these images . There might have been problems with Share button though that were present before

    [im]http://3.bp.blogspot.com/-rLkCXU1WOI0/TtZdrOKhnjI/AAAAAAAABi0/XZFK5MuAPJQ/s1600/ena.PNG[/im]

    [im]http://2.bp.blogspot.com/-8iteaiIMmlc/TtZdrzNnvdI/AAAAAAAABi4/G4L-773qN10/s1600/dis.PNG[/im]

    1. Yes surely Em Ji Madhu , but the best would be to include all the code related to the other jQuery plugins just near the /body tag . The reason for it is that including scripts in the head will slow down the loading of your site

    2. One more doubt… recently i was trying to place recent post widget… But no widget is showing in my blog… i tried Linkwithin, nrelate (as you you stated in this blog) and other widgets too… But none is working for me… i dont know why… i tried to place it below both codes (data:body/) and (data:footerline-1)… but nothing is working on my blog… 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *