Detectar evento de carga de múltiples imágenes

Me pregunto si hay una manera de detectar el evento de carga de varias imágenes (particularmente, una function debería ejecutarse cuando la última image en un set dado ha terminado de cargarse).

Por ejemplo, un usuario hace clic en un enlace y aparece Lighbox con 10 imágenes. Cuando se hayan cargado todas las imágenes, la barra de carga debería desaparecer.

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

Desafortunadamente, esto desencadena hideLoadingBar(); demasiado temprano (después de que una image haya terminado de cargarse).

PD
También necesito que mi function funcione después de que las imágenes hayan sido almacenadas en la jQuery('#img1, #img2').load(); caching así: jQuery('#img1, #img2').load(); no funcionará

Mira este plugin de jQuery imagesLoaded , creo que debería adaptarse a tus necesidades.

Bueno, parece que nadie tiene una mejor idea, así que a continuación está mi solución / solución. La otra respuesta a esta pregunta es probablemente la que desea usar porque es una biblioteca creada específicamente para eso, pero esta es la solución que voy a usar porque es más corta y 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(); } }); }); 

Funciona para imágenes en caching y no en caching.