我正在尝试通过使用延迟加载 jquery 插件并按照此站点上的说明操作 Flexslider 的延迟加载：http://www.appelsiini.net/projects/lazyload
我正在加载插件脚本，但在控制台上看不到任何错误。我试过没有在lazyload函数中传递容器或选项，但仍然没有。我花了几个小时在这上面。
$("img.lazy").lazyload({
effect: "fadeIn",
container: $(".slides > li")
});
有谁知道如何在 Flexslider 中实现延迟加载？
【问题讨论】：
标签： jquery jquery-plugins lazy-loading flexslider
我在滚动期间实现了延迟加载。与此处提出的其他解决方案相比，此解决方案更适用于大型集合。 在初始化期间，它仅加载前 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");
});
}
});
【讨论】：
该方法对我来说效果很好，但加载的图像确实需要与其余图像的大小相同。我实际上使用 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");
});
}
});
我希望这对某人有所帮助。
【讨论】：
我正在尝试使用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 回调）之后触发它。
【讨论】：
为了提供替代解决方案 - 另一种选择是使用已经内置延迟加载的响应式滑块，例如皇家滑块，这是链接 -> http://dimsemenov.com/plugins/royal-slider/
【讨论】：
你不妨用自定义触发事件初始化lazyload ...
$jQ("img[data-original]").lazyload({
effect: "fadeIn",
skip_invisible: false,
event: "forceLazyLoad"
});
... 然后调用此事件以在 flexslider 中预加载所有图像，调用如下：
$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
【讨论】：
所以我将真实图像页面添加到图像标签上的 data-attr 属性中，并在 after 事件触发时找到带有 active 类的图像并将 img src 属性设置为等于 data-attr 值。
【讨论】：