title: how to implement lazy loading as facebook load its content on scrolling
body: <p>I am implementing a webpage in which I want to apply lazy loading for the images in such a way that when page loaded, some images(ex. 20 images) load at once and others will load on scroll. After loading 100 images on scroll it'll ask for "View More" on button Click below after scroll like facebook.</p>
  
  <p>Below is the code in which images are loaded on scroll.</p>
  
  <pre><code>&lt;head id="Head1" runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="../Script/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../Script/jquery.lazyload.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      .lazy
      {
          /*display: none;*/
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      /*===================================*/
      $(function () {
          $("img.lazy").lazyload({
              effect: "fadeIn",
              effectSpeed: 5000,
              failure_limit: 10,
              enableThrottle: false,
              threshold: 50,
              failure_limit: 0,
              skip_invisible: true
          });
      });
      /*=====================*/
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div id="container" class="container" style="width: 100%; height: 500px; overflow: 
  visible;
      padding: 5px; margin: 0 auto;"&gt;
      &lt;asp:DataList ID="dtl_ShowGallery" runat="server" DataKeyField="ImageId" 
  GridLines="None"
          AlternatingItemStyle-CssClass="dtl_rowStyle" CssClass="dtl_rowStyle" 
  AlternatingItemStyle-VerticalAlign="Middle"
          RepeatDirection="Vertical" RepeatColumns="5"&gt;
          &lt;AlternatingItemStyle CssClass="dtl_rowStyle" Font-Size="8pt" 
  VerticalAlign="Middle" /&gt;
          &lt;HeaderStyle Font-Size="8pt" /&gt;
          &lt;HeaderTemplate&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;img height="150px" width="180px" class="lazy" alt="No Image" 
  data-original='&lt;%# ((DataBinder.Eval(Container.DataItem, "ImageName").ToString() != 
  "") ? "../Images/Gallery/" + DataBinder.Eval(Container.DataItem, 
  "ImageName").ToString() :"../Images/Gallery/ImageNotAvailable.jpg")%&gt;'
                  src="../Script/lazyloader/loader/loading.gif" /&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:DataList&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The above code shows result and load images when scroll. How can I implement whatever I want? Please make a solution for the problem above mentioned.
  Thank You.</p>