Lazy load/Scroll to load jQuery tool for images.

In lazy load the whole content is not loaded in a single go. But loads as we scroll down. So that it takes less time while loading contents of a page with heavy text text and images. we can aply lazy load in various type of content to make loading fast, efficient and convinient for users. As you can see in Demo the content is loaded as we scroll down.

 DEMO

 HTML CODE

<li class="friend"><pre class="loadme"><!-- <div class="friend_rec"> LAZY CONTENT HERE LAZY CONTENT HERE  </div> --></pre></li>
<li class="friend"><pre class="loadme"><!-- <div class="friend_rec"> LAZY CONTENT HERE LAZY CONTENT HERE </div> --></pre></li>
<li class="friend"><pre class="loadme"><!-- <div class="friend_rec"> LAZY CONTENT HERE LAZY CONTENT HERE </div> --></pre></li>

jQuery CODE

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>    
<script type='text/javascript' src="http://ivorycity.com/jquery.lazyloader.js"></script>
<script>
$(document).ready( function()
   {
    $('pre.loadme').lazyLoad();
    $('pre.morestuff').lazyLoad();
} );
<script>

CSS

  li {
   list-style-type: none;
   float: left;
   clear: both;
            margin: 8px;
   width: 70%;
  }