0

大家好，我有一个问题，我正在为我的网站中的图像使用延迟加载。我使用服务器端获取前 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 加载，但它没有用。我应该怎么做才能再次触发它？谢谢你。

4

1 回答 1

6

jQuery 延迟加载并不是真正为动态内容而设计的。通常，您必须始终调用 $.lazyload，这可能会导致内存泄漏和运行时性能下降。我建议您尝试lazySizes。您需要做的就是将脚本添加到页面，添加类lazyload和data-src图像的 URL。没有其他特殊的 JS 方法可以调用或触发事件。

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

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

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.lazyClass = 'lazy';
window.lazySizesConfig.srcAttr = 'data-original';
于 2015-03-13T23:35:22.133 回答