подкачка тяжелого документа с использованием jquery и mvc

Question

У меня есть HTML-документ, но его размер составляет около 5 МБ.

Вот мой код "../Product/index?page=1", он генерирует 5 МБ HTML:

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

Я не хочу загружать его полностью, когда прокручивается вниз, он должен загрузить 10 других элементов "li"

Answer 1

Я не симулирую такую ​​тяжелую страницу, но у меня есть другой способ загрузки страницы.Возможно, это может быть справка для вас.

1. Разделяйте каждый запрос страницы на стороне действия и возвращайте только одно содержимое страницы.
2. Соберите контент "style" в класс css,чтобы уменьшить содержание страницы.
3. Повышение производительности LINQ с помощью PLINQ.

Я замечаю вывод кода на каждом содержимом страницы.

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

Я предлагаю вам

1. модификация LINQ с функцией пейджинга.
2. Обновление LINQ как PLINQ для повышения производительности.Я добавляю AsParallel () после db.vwGood, я не уверен, какой экземпляр db.vwGood, и желаю, чтобы это изменение могло быть полезным.
3. Не возвращать содержимое HTML в Razor View, но в действии.

Псевдокод действия, как показано ниже,

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