jQuery Flexslider 中的延迟加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12360533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Lazy Loading in Flexslider
提问by Encore PTL
I am trying to get lazy loading working for Flexsliderby using Lazy Loading jquery plugin and following the instructions on this site: http://www.appelsiini.net/projects/lazyload
我正在尝试通过使用延迟加载 jquery 插件并按照此站点上的说明为Flexslider进行延迟加载：http: //www.appelsiini.net/projects/lazyload
I am loading the plugin script and don't see any errors on console. I tried without the container or options being passed in lazyload function and still nothing. I spend hours on this.
我正在加载插件脚本，但在控制台上没有看到任何错误。我试过没有在延迟加载函数中传递容器或选项，但仍然没有。我花了几个小时在这上面。
$("img.lazy").lazyload({
effect: "fadeIn",
container: $(".slides > li")
});
Does anyone know how to get lazy loading working in Flexslider?
有谁知道如何在 Flexslider 中进行延迟加载？
采纳答案by Encore PTL
So I added the real image page to the data-attr attribute on the image tag and on afterevent fire I would find the image with activeclass and set the img src attribute equal to data-attr value.
因此，我将真实图像页面添加到图像标记上的 data-attr 属性中，并且在after事件触发时，我会找到具有active类的图像并将 img src 属性设置为等于 data-attr 值。
回答by Roman Podlinov
I implemented a lazy load during scrolling. This solution works better for big collections in comparison with other solutions proposed here.During initialization it loads only first 5 images and then it loads ahead 3 images for every animation.
我在滚动期间实现了延迟加载。与此处提出的其他解决方案相比，此解决方案更适用于大型集合。在初始化期间，它只加载前 5 个图像，然后为每个动画加载 3 个图像。
<li>
<img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>
and javascript code:
和 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");
});
}
});
回答by Tommy W
The method works pretty well for me, but the loading image does need to be the same size as the rest of the images. I actually use http://imageresizing.net/with mode=pad
该方法对我来说效果很好，但加载图像确实需要与其余图像的大小相同。我实际上使用http://imageresizing.net/和 mode=pad
In the main container that you are using for flexslider, put the actual image in a "data-src" attribute
在用于 flexslider 的主容器中，将实际图像放在“data-src”属性中
<li>
<img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>
In you initialization function, use the "start" callback to replace the loading image with the actual image, and remove the attribute
在你的初始化函数中，使用“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");
});
}
});
I hope this helps someone.
我希望这可以帮助别人。
回答by alexandria757
I am trying to do the same thing using Flexslider 2and the Lazy Load Plugin for jQuery.
我正在尝试使用Flexslider 2和jQuery的延迟加载插件来做同样的事情。
It seems the containerproperty only works if the element is styled with overflow:scroll;
似乎该container属性仅在元素样式为overflow:scroll;
I was able to get the lazy load to work using this code:
我能够使用以下代码使延迟加载工作：
$("#flexcontainer img.lazy").lazyload({
failure_limit : 10,
effect: "fadeIn",
skip_invisible : false
});
However, this just lazy loads everything at once instead of as the flexslider animates.
然而，这只是一次延迟加载所有内容，而不是 flexslider 动画。
I was also able to get it to work on mouse over using this code:
我还能够使用以下代码让它在鼠标悬停时工作：
$("#flexcontainer img.lazy").lazyload({
failure_limit : 10,
effect: "fadeIn",
event : "mouseover"
});
However this doesn't work on touch devices.
但是，这不适用于触摸设备。
I think the key is to create your own custom event and have it trigger after a flexslider callback such as the aftercallback.
我认为关键是创建自己的自定义事件，并在 flexslider 回调（例如after回调）之后触发它。
回答by uknowit2
For the sake of offering an alternative solution - another option is to use a responsive slider which already has lazy load built into it, for example royal slider, here is the link -> http://dimsemenov.com/plugins/royal-slider/
为了提供替代解决方案 - 另一种选择是使用已经内置延迟加载的响应式滑块，例如皇家滑块，这里是链接 - > http://dimsemenov.com/plugins/royal-slider /
回答by Carlos A. Cabrera
You might as well initialize lazyload with a custom trigger event ...
您不妨使用自定义触发事件初始化lazyload ...
$jQ("img[data-original]").lazyload({
effect: "fadeIn",
skip_invisible: false,
event: "forceLazyLoad"
});
... and then call this event to preload all your images inside the flexslider with a call like:
...然后调用此事件以通过如下调用将所有图像预加载到 flexslider 中：
$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
