Lazy loading images

I encountered a similar situation in a tab style page where the content in initially invisible tabs was downloading unnecessarily. The solution I went with was to create markup like:

<img src="#" data-src="/img/foo.png"/>

and then in the javascript that handles the tab transitions I also substituted the "data-src" attribute into the "src" attribute of those images.

$thisTab.find('img[data-src]').each(function(img) {
    var $img = $(img);
    $img.attr('src', $img.attr('data-src'))
        .removeAttr('data-src');
});

This accomplishes the goal of only loading the images when the tab is selected, and is valid html5!

I know the dev says it's not working but I'm using LazyLoad on a project right now and it works fine in FF (I'm using Firefox 4). It takes about 24seconds to download and set up so give it a go to see if it works for you :)

I was having an issue with it not working in FF as well, but I got it working when I filled out the initial src attribute value with an image, like Monsieur Tuupola does on this example page, where he uses a 1px x 1px gray gif image for a place holder:

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

Fire 'er up in FF, and it'll work.