Question

大家好，我有一个问题我在我的网站上使用延迟加载我的图片。我使用服务器端获取前10个数据，这里没问题。但是我使用jquery＆gt;加载下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。您需要做的就是add the script到您的网页，为您的图片添加网址lazyload和data-src。没有其他特殊的JS方法可以调用或触发事件。

亲自尝试一下，你会很高兴。

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

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

使用jquery获取图像后，Lazy Load无法正常工作

1 个答案: