Ленивая загрузка не работает после получения изображений с помощью jquery

Привет всем, у меня есть вопрос, я использую ленивую загрузку для моих изображений на моем веб-сайте. Я беру свои первые 10 данных, используя серверную часть, здесь все в порядке. Однако я загружаю следующие 10 данных с помощью jquery> ajax. Я могу получить данные, какие хочу, но функция ленивой загрузки не работает с новыми данными.

$(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {

                $.getScript("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
                $.getScript("~/Content/js/jquery.js");
                $.getScript("~/Content/js/main.js");
                $.getScript("~/Content/js/jquery.lazyload.js");
                GetNextPageData(true);

                $(function () {
                    $("img.lazy").lazyload({
                        event: "burak",
                        effect: "fadeIn"
                    });
                });

                $(window).bind("load", function () {
                    var timeout = setTimeout(function () {
                        $("img.lazy").trigger("burak")
                    }, 1000);
                });
            }
        });

а вот часть моего взгляда

<div class="col-xs-6 pr0 js-img-container">

         @{
             string img1 = item.image_1;
             string img2 = item.image_2;   
         }
             @*<img src="~/Content/img/loading.gif" id="img1" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img1" class="lazy js-img-left img-responsive" style="height:250px;width:317px;" title="" alt="@_a">*@
         <img src="~/Content/img/loading.gif" id="img1" data-groupornot="@GroupOrNot" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img1" class="lazy js-img-left img-responsive img-fix" title="" alt="@_a">
         <span id="spn1_@_b" class="@isLikeLeft"></span>
         <div class="which-bar left"><span id="perc1@_b@GroupOrNot" class="pr5">@percentage1%</span></div>
     </div>
     <div class="col-xs-6 pl0 js-img-container">
         @*<img src="~/Content/img/loading.gif" id="img2" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img2" class="lazy js-img-right img-responsive" title="" alt="@_a">*@
             <img src="~/Content/img/loading.gif" id="img2" data-groupornot="@GroupOrNot" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img2" class="lazy js-img-right img-responsive img-fix" title="" alt="@_a">
         <span id="spn2_@_b" class="@isLikeRight"></span>
         <div class="which-bar right"><span id="perc2@_b@GroupOrNot" class="pl5">@percentage2%</span></div>
     </div>

Я пытался загрузить с помощью getscript, но это не сработало. Что мне сделать, чтобы вызвать его снова? Спасибо.


jquery ajax lazy-loading dynamic-content jquery-lazyload
person nalpara    schedule 13.03.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

jQuery lazyload на самом деле не предназначен для динамического контента. Как правило, вы должны постоянно вызывать $.lazyload, что может привести к утечке памяти и снижению производительности во время выполнения. Я рекомендую вам попробовать lazySizes. Все, что вам нужно сделать, это добавить скрипт в вашей страницы, добавьте класс lazyload и data-src для URL-адреса ваших изображений. Нет другого специального метода JS для вызова или запуска события.

Просто попробуйте сами, вам будет приятно.

Если вы не хотите изменять разметку, вы также можете настроить ее на использование класса lazy и атрибута data-original:

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.lazyClass = 'lazy';
window.lazySizesConfig.srcAttr = 'data-original';
person alexander farkas    schedule 13.03.2015
comment
Большое спасибо, я понял, как это вспомнить. Это работает немного медленно, если так будет продолжаться, я попробую lazySİzes. Я только что снова услышал это спасибо. - person nalpara; 16.03.2015