16

我正在尝试通过使用延迟加载 jquery 插件并按照本网站上的说明为Flexslider进行延迟加载：http: //www.appelsiini.net/projects/lazyload

我正在加载插件脚本，但在控制台上看不到任何错误。我试过没有在lazyload函数中传递容器或选项，但仍然没有。我花了几个小时在这上面。

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

Does anyone know how to get lazy loading working in Flexslider?

4

6 回答 6

14

我在滚动期间实现了延迟加载。与此处提出的其他解决方案相比，此解决方案更适用于大型馆藏。 在初始化期间，它只加载前 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");
            });
        }
    });
于 2014-02-05T21:11:49.030 回答
7

该方法对我来说效果很好，但是加载图像确实需要与其余图像的大小相同。我实际上使用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");
       });
     }
});

我希望这可以帮助别人。

于 2012-10-28T17:35:47.223 回答
4

我正在尝试使用Flexslider 2和Lazy Load Plugin for jQuery做同样的事情。

似乎该container属性仅在元素样式为overflow:scroll;

我能够使用以下代码使延迟加载工作：

$("#flexcontainer img.lazy").lazyload({
    failure_limit : 10,
    effect: "fadeIn",
    skip_invisible : false
});

但是，这只是一次延迟加载所有内容，而不是像 flexslider 动画一样。

我还能够使用以下代码让它在鼠标悬停时工作：

 $("#flexcontainer img.lazy").lazyload({
     failure_limit : 10,
     effect: "fadeIn",
     event : "mouseover"
 });

但是，这不适用于触摸设备。

我认为关键是创建您自己的自定义事件并在诸如回调之类的 flexslider 回调之后触发它after。

于 2012-09-14T20:56:40.830 回答
2

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

于 2013-09-27T19:20:50.217 回答
1

您不妨使用自定义触发事件初始化延迟加载...

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

...然后调用此事件以将所有图像预加载到 flexslider 中，调用如下：

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
于 2013-08-05T16:54:18.003 回答
0

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

于 2012-09-19T00:58:10.683 回答