Imagen cargada para imágenes estáticas

Sé que para que funcione la carga de la image, debe configurar el src después de conectar el controller de carga. Sin embargo, quiero adjuntar controlleres de carga a las imágenes que están estáticas en mi HTML. Ahora mismo lo hago de la siguiente manera (usando jQquery):

<img id='img1' src='picture.jpg'> 

 $('#img1').load( function() { alert('foo'); }) .attr('src', $('img1').attr('src')); 

Pero esto es bastante feo y tiene el flujo obvio de que solo se puede hacer para selectores que coincidan con una sola image. ¿Hay alguna otra manera más agradable de hacer esto?

editar
Lo que quise decir con eso solo se puede hacer para el selector que coincida con una sola image es que al hacer esto:

 <img class='img1' src='picture.jpg'> <img class='img1' src='picture2.jpg'> 

 $('.img1').load( function() { alert('foo'); }) .attr('src', $('.img1').attr('src')); 

Que ambas imágenes tendrán src = 'picture.jpg'

Puede desencadenar el evento (o su controller) directamente llamando a .trigger() o .load() .

Si sabes que quieres el evento, porque sabes que las imágenes ya están cargadas, puedes hacerlo así:

 $('#img1').load(function() { alert('foo'); }) .trigger('load'); // fires the load event on the image 

Si está ejecutando su script en un documento listo o en algún momento en el que aún no está claro si las imágenes están allí o no, entonces usaría algo como esto:

 $('img.static') .load(function(){ alert('foo'); return false; // cancel event bubble }) .each(function(){ // trigger events for images that have loaded, // other images will trigger the event once they load if ( this.complete && this.naturalWidth !== 0 ) { $( this ).trigger('load'); } }); 

Tenga en count que el evento de carga burbujea (jQuery 1.3) y que posiblemente esté activando un controller de carga en el documento prematuramente si no cancela la burbuja en el controller de img.

Para el logging: la solución de disparo img.src=img.src desafortunadamente no funcionará correctamente en Safari. Tendrá que configurar el src en otra cosa (como # o aproximadamente: en blanco) y luego volver para que se realice la recarga.

De acuerdo, convertí la respuesta de Borgars en un complemento, aquí está:

 $.fn.imageLoad = function(fn){ this.load(fn); this.each( function() { if ( this.complete && this.naturalWidth !== 0 ) { $(this).trigger('load'); } }); } 

Supongo que esto es realmente una pregunta sobre los selectores de jQuery. Si desea hacer coincidir todos los elementos de su image, puede usar img lugar de #img1 como selector.

Agregue una class a las imágenes donde desee esta funcionalidad y use esa class en el selector jQuery.

 $('.static-image').load( function(){ ... } );