jquery - Flexslider 中的延迟加载

Question

我正在尝试让延迟加载工作于 Flexslider通过使用延迟加载 jquery 插件并按照本网站上的说明进行操作:http://www.appelsiini.net/projects/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");
            });
        }
    });