Lazy Loading in Flexslider

Question

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/la

Answer 1

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.