Question

I have a html document but it’s size is about 5MB.

Here is my code “../Product/index?page=1” it generates 5MB html :

Plugin url : http://andersonferminiano.com/jqueryscrollpagination/

    <script type="text/javascript">
        $(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() > 100) {
                        $('#nomoreresults').fadeIn();
                        $('#content').stopScrollPagination();
                    }
                }
            });
            $.fn.fadeInWithDelay = function () {
                var delay = 0;
                return this.each(function () {
                    $(this).delay(delay).animate({ opacity: 1 }, 200);
                    delay += 100;
                });
            };
        });
    </script>
<!--_____________________________________________________________________-->
    @{
    // 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 <= iPage; i++)
            {
                foreach (var q in queries)
                {
                    counter++;
    <li style="opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);">
        <p>
            @counter
        </p>
    </li>           
                }
            }
        }
    }
}

I don’t want to load it complete when the scroll goes down it should load 10 other “li” element

Answer 1

I do not simulate so heavy page, but I have an other way to load page. Maybe, it can be a reference for you.

1. Separate each page request at action side, and return for only one page content.
2. Collect “style” content to css class, to reduce page content.
3. Improve performance of LINQ with PLINQ.

I notice the code output every page content.

var queries = from n in db.vwGood select n;
        long counter = 0;    
for (int i = 1; i <= iPage; i++)
{
    foreach (var q in queries)
    {
        counter++;
    }
}

I suggest you can

1. modify LINQ with Paging function.
2. Update LINQ as PLINQ to improve performance. I add AsParallel() after db.vwGood, I am not sure what db.vwGood instance and wish this modify can be good.
3. Not return HTML content in Razor View, but in Action.

Pseudo code of Action is as below,

// iAmount is record amount in each page.
int iAmount = 50;
// queries is only the iPage content 
// but not all of content from page one to page iPage.
var queries = (from n in db.vwGood.AsParallel() select n)
              .Skip(iPage - 1).Take(iAmount);
long counter = 0;
string strContent = string.Empty;
foreach (var q in queries)
{
    counter++;
    // Generate Cotnent here.
    strContent += @"<li class='YourClassName'><p>@counter</p></li>"
}
return Content(strContent) 

When ShowMore button is clicked, ShowMore_OnClick() is performanced.

<input type="button" style="width: 100%" id="BtnShowMore" value="MORE"
    onclick="return ShowMore_OnClick();" />

This is JavaScript for Loading function.
I notice you do not use button to control content display, but scrollPagination. You can modify the JavaScript to suit with scrollPagination plugin. The thinking of code structure is same.

    var PageNO = 1;
    function ShowMore_OnClick() {
        var BtnShowMore = document.getElementById("BtnShowMore");
        BtnShowMore.value = "Loading...";
        jQuery.post(
            "/Home/GetHomeEventAjax/",
            { "PageNO": PageNO + 1 },
            function (data, states) {
                if (states == "success") {
                    var EventListArea = document.getElementById("EventListArea");

                    var newCommentItem = document.createElement("DIV");
                    newCommentItem.setAttribute("ID", "EventItem");
                    newCommentItem.innerHTML = data;
                    EventListArea.appendChild(newCommentItem);
                    PageNO = PageNO + 1;
                    BtnShowMore.value = "More";
                }
            }
        );
    }