title: paging a heavy document using jquery and mvc
body: <p>I have a html document but it's size is about 5MB.</p>
  
  <p>Here is my code "../Product/index?page=1" it generates 5MB html : </p>
  
  <p>Plugin url : <a href="http://andersonferminiano.com/jqueryscrollpagination/" rel="nofollow">http://andersonferminiano.com/jqueryscrollpagination/</a></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(function () {
              $('#content').scrollPagination({
                  'contentPage': '../Product/index?page=1',
                  'contentData': {},
                  'scrollTarget': $(window),
                  'heightOffset': 10,
                  'beforeLoad': function () {
                      $('#loading').fadeIn();
                  },
                  'afterLoad': function (elementsLoaded) {
                      $('#loading').fadeOut();
                      var i = 0;
                      $(elementsLoaded).fadeInWithDelay();
                      if ($('#content').children().size() &gt; 100) {
                          $('#nomoreresults').fadeIn();
                          $('#content').stopScrollPagination();
                      }
                  }
              });
              $.fn.fadeInWithDelay = function () {
                  var delay = 0;
                  return this.each(function () {
                      $(this).delay(delay).animate({ opacity: 1 }, 200);
                      delay += 100;
                  });
              };
          });
      &lt;/script&gt;
  &lt;!--_____________________________________________________________________--&gt;
      @{
      // here is "Product/index" Code
      if (Request.QueryString.HasKeys())
      {
          int iPage = Request.QueryString["page"].AsInt();
          using (var db = new PNUBOOKIR.Models.KowsarSiteEntities())
          {
              var queries = from n in db.vwGood
                            select n;
              long counter = 0;
              for (int i = 1; i &lt;= iPage; i++)
              {
                  foreach (var q in queries)
                  {
                      counter++;
      &lt;li style="opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);"&gt;
          &lt;p&gt;
              @counter
          &lt;/p&gt;
      &lt;/li&gt;           
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>I don't want to load it complete when the scroll goes down it should load 10 other "li" element</p>