我正在尝试通过使用Lazy Loading jQuery插件并按照此网站的说明(http://www.appelsiini.net/projects/lazyload)来使Flexslider懒加载。
我已经加载了插件脚本，并且在控制台中没有看到任何错误。即使在lazyload函数中没有传递容器或选项，也尝试过了，但仍然没有效果。我花了几个小时在这上面。
$("img.lazy").lazyload({
effect: "fadeIn",
container: $(".slides > li")
});
有人知道如何在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>
$('#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");
});
}
});
overflow:scroll;样式时，container属性才能起作用。$("#flexcontainer img.lazy").lazyload({
failure_limit : 10,
effect: "fadeIn",
skip_invisible : false
});
然而，这样只是一次性地懒加载所有内容，而不是在flexslider动画播放时逐步加载。
我还能够使用以下代码使其在鼠标悬停时工作：
$("#flexcontainer img.lazy").lazyload({
failure_limit : 10,
effect: "fadeIn",
event : "mouseover"
});
为了提供另一种解决方案——另一个选择是使用一个已经内置懒加载的响应式幻灯片，例如Royal Slider，这是链接-> 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值。