javascript - 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.