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" />'); 
}

Answer 2

Timo I think he doesn't want anyway that loads images in the dom before he needs them. Somehow this is a classic scenario of using ajax to load content.

I propose that you go about it like this

$.fn.image = function(src, f) {

        return this.each(function() {

            var i = new Image();

            i.src = src;

            i.onload = f;

            this.appendChild(i);

        });
    }

    $(function() {


        $('yourlink').click(function() {

            $("#container").image("image.jpg", function() {

                alert("image loaded");

            });
        });

    });