jQuery LazyLoad images in a hidden div

Question

I have a bunch of images that are in a hidden div. The div is shown when the user clicks on some links.

I'd like to jQuery lazyload to hide these images until the link is clicked and the hidden div is exposed. But, if I use lazyload according to the documentation, the images are always loaded as the hidden div is in the viewport, presumably.

any ideas?

Answer 1

Do you really need the lazy load plugin? How about replacing the div content with the image(s) when you click the link?

Something like:

<a href="link" onclick="show_images('div_id');">asdf</a>

and

function show_images(id) { 
    $('#' + id).append('<img src="image1.jpg" /><img src="imagex.jpg" />'); 
}