Lazy loading images [duplicate]

Answer 1

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:

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!