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

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

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.