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

Answer 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");
            });
        }
    });