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

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.