Flexslider lazyloading - to only load an image when it's truly needed

Flexslider lazyloading - to only load an image when it's truly needed

This is really only following on from an answer to Flexslider lazyloading
here I am using that code which I Have copied below. I would like to alter
it so that images only loaded when truly needed.
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.
$('#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");
});
}
});
When viewing the slider source live in Firebug, and running the script
above I expected to see empty src attributes for all slides that had not
initiated, but all src attributes were full from the start, I thought lazy
loading meant on demand? How do I test if lazy loading is working?
Thanks