Detect multiple images load event

Question

I'm wondering if there is a way to detect load event of multiple images (particularly, a function should execute when the last image in a given set has completed loading).

For instance, an user clicks on a link and lighbox appears with 10 images. When all images have loaded, loading bar should disappear.

jQuery(".lightbox-image").each(function(){
    var image = jQuery(this);
    jQuery('<img />').attr('src', image.attr('src')).load(function(){
        hideLoadingBar();
    });
});

This unfortunately triggers hideLoadingBar(); too early (after one image has completed loading).

P.S.
I also need my function to work after images have been cached so: jQuery('#img1, #img2').load(); won't work.

Answer 1

Check out this jQuery imagesLoaded plugin, it should suit your needs I think.

Answer 2

Well, it seems that no one has better idea, so below is my solution/workaround. The other answer to this question is probably what you want to use because it's a library created specifically for that but here's the solution that I'm going to use because it's shorter and simple:

var allImages = jQuery(".lightbox-image").length;
var counter = 0;
jQuery(".lightbox-image").each(function(){
    var image = jQuery(this).find('.myimage');
    jQuery('<img />').attr('src', image.attr('src')).load(function(){
        counter++;
        if(counter >= allImages){
            hideLoadingBar();
        }
    });
});

Works for cached images and not cached images.