使用 jquery 获取图像后延迟加载不起作用

Question

大家好我有一个问题，我在我的网站上对我的图像使用延迟加载。我使用服务器端获取我的前 10 个数据，这里没问题。但是我使用 jquery> ajax 加载了接下来的 10 个数据。我可以得到我想要的数据，但延迟加载功能不适用于新数据。

$(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 加载，但没有成功。我应该怎么做才能再次触发它？谢谢。

Answer 1

jQuery lazyload 并不是真正为动态内容而设计的。通常，您必须始终调用 $.lazyload，这可能会导致内存泄漏和运行时性能下降。我建议您尝试将 lazySizes. Everything you need to do is to add the script 添加到您的页面，将 class lazyload 和 data-src 添加到您的图片中 URL。没有其他特殊的 JS 方法来调用或触发事件。

你自己试试吧，你会很高兴的。

如果您不想更改标记，您还可以将其配置为使用 lazy class 和 data-original 属性：

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.lazyClass = 'lazy';
window.lazySizesConfig.srcAttr = 'data-original';

使用 jquery 获取图像后延迟加载不起作用

Lazy Load not working after getting images with jquery

ajax

jquery

lazy-loading

dynamic-content

jquery-lazyload