title: Flexslider lazyloading - only load an image when it's truly needed
body: <p>This is really only following on from an answer to Flexslider lazyloading <a href="https://stackoverflow.com/questions/12360533/lazy-loading-in-flexslider#13111286">here</a> I am using that code which I Have pasted below. I would like to alter it so that images only loaded when truly needed. </p>
  
  <p>I tried the other Flexslider properties, before: and after: but they created a delay on the first slide? Please can I get some help with this.</p>
  
  <pre><code>$('#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");
     });
   }
  });
  </code></pre>