问题
I am trying to get lazy loading working for Flexslider by using Lazy Loading jquery plugin and following the instructions on this site: 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?
回答1:
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.
<li>
<img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>
and javascript code:
$('.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");
});
}
});
回答2:
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
In the main container that you are using for flexslider, put the actual image in a "data-src" attribute
<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
$('#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.
回答3:
I am trying to do the same thing using Flexslider 2 and the Lazy Load Plugin for jQuery.
It seems the container
property only works if the element is styled with 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.
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 after
callback.
回答4:
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/
回答5:
You might as well initialize lazyload with a custom trigger event ...
$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:
$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
回答6:
So I added the real image page to the data-attr attribute on the image tag and on after
event fire I would find the image with active
class and set the img src attribute equal to data-attr value.
来源:https://stackoverflow.com/questions/12360533/lazy-loading-in-flexslider