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

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

在用于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

为了提供替代解决方案 - 另一种选择是使用已经内置了延迟负载的响应滑块，例如皇家滑块，这里是链接 - ＆gt; http://dimsemenov.com/plugins/royal-slider/

Answer 4

您也可以使用自定义触发器事件初始化lazyload ...

$jQ("img[data-original]").lazyload({
            effect: "fadeIn",
            skip_invisible: false,
            event: "forceLazyLoad"
        });

...然后调用此事件以通过以下调用预加载flexslider中的所有图像：

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');

Flexslider中的延迟加载

4 个答案: