Question

我有一个html文档，但它的大小约为5MB。

这是我的代码“../Product/index?page=1”它生成5MB html：

插件网址：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>           
                }
            }
        }
    }
}

我不想在滚动下来时加载它应该加载10个其他“li”元素

Answer 1

我没有模拟这么重的页面，但我有另一种方法来加载页面。也许，它可以作为你的参考。

在操作方将每个页面请求分开，并仅返回一页内容。
将“样式”内容收集到css类，以减少页面内容。
使用PLINQ提高LINQ的性能。

我注意到每个页面内容的代码输出。

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++;
    }
}

我建议你可以

使用分页功能修改LINQ。
将LINQ更新为PLINQ以提高性能。我在db.vwGood之后添加了AsParallel（），我不确定db.vwGood实例是什么，并希望这个修改可以很好。
不在Razor View中返回HTML内容，但在Action中。

行动伪代码如下，

// 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)

单击ShowMore按钮时，ShowMore_OnClick（）将被执行。

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

这是用于加载功能的JavaScript。我注意到你不使用按钮来控制内容显示，而是使用scrollPagination。您可以修改JavaScript以适应scrollPagination插件。代码结构的思路是一样的。

    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";
                }
            }
        );
    }

使用jquery和mvc分页繁重的文档

1 个答案: