Flexslider中的延迟加载

Question

我试图通过使用Lazy Loading jquery插件并遵循此站点上的说明来为Flexslider进行延迟加载:http://www.appelsiini.net/projects/lazyload

我正在加载插件脚本,并没有在控制台上看到任何错误.我尝试没有容器或选项在lazyload函数中传递,但仍然没有.我花了好几个小时.

$("img.lazy").lazyload({
  effect: "fadeIn",
  container: $(".slides > li")
});

有谁知道如何在Flexslider中进行延迟加载？

Answer 1

我在滚动期间实现了延迟加载.与此处提出的其他解决方案相比,此解决方案适用于大型集合. 在初始化期间,它仅加载前5个图像,然后为每个动画加载3个图像.

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li> 

和javascript代码:

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });

Answer 2

该方法对我来说效果很好,但加载图像确实需要与其他图像的大小相同.我实际上使用带有mode = pad的http://imageresizing.net/

在用于flexslider的主容器中,将实际图像放在"data-src"属性中

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>            

在初始化函数中,使用"start"回调将加载图像替换为实际图像,并删除该属性

$('#slider').flexslider({
    start: function (slider) {
       // lazy load
       $(slider).find("img.lazy").each(function () {
          var src = $(this).attr("data-src");
          $(this).attr("src", src).removeAttr("data-src");
       });
     }
});

我希望这可以帮助别人.

Answer 3

因此，我将真实图像页面添加到图像标签上的 data-attr 属性中，并且在after事件触发时，我会找到具有类的图像active并将 img src 属性设置为等于 data-attr 值。