Flexslider中的延迟加载

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

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

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

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

Answer 1

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

和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”属性中

在初始化函数中，使用“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

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

似乎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回调。

Answer 4

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

Answer 5

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

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

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

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

Answer 6

所以我将实际图像页面添加到图像标记上的data-attr属性，然后在事件触发后，我会找到具有active类的图像，并将img src属性设置为等于data-attr值。