Detect multiple images load event
image, javascript, jquery, load
Solution
Check out this jQuery imagesLoaded plugin, it should suit your needs I think.
Problem
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.