Carga de imagen para imágenes estáticas

Question

Sé que para que funcione la carga de la imagen debe configurar el src después de conectar el controlador de carga. Sin embargo, quiero adjuntar controladores de carga a las imágenes que están estáticas en mi HTML. En este momento hago eso 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 más bien fea y tiene el flujo obvio que sólo se puede hacer para los selectores que responden a un único imagen. ¿Hay alguna otra manera más agradable de hacer esto?

edición
lo que quería decir que sólo se puede hacer por selector que coincide con una sola imagen 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 se tiene src = 'picture.jpg'

Answer 1

Puede activar el evento (o su manejador) directamente llamando .trigger() o .load().

Si sabe que desea que el evento, porque usted sabe que las imágenes ya están cargados, a continuación, puede hacerlo de esta manera:

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

Si está ejecutando la secuencia de comandos en el documento listo o algún momento donde aún no está claro si las imágenes están ahí o no, entonces me gustaría usar 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'); 
    } 
    }); 

ser advertidos de que las burbujas de eventos de carga (jQuery 1.3) y que posiblemente podrían ser los desencadenantes de un controlador de carga en el documento prematuramente si no cancela la burbuja en el controlador de img

Para el registro: Desafortunadamente, la solución de activación img.src=img.src no funcionará correctamente en Safari. Deberá configurar el src en otra cosa (como # o sobre: ​​en blanco) y luego volver para que se realice la recarga.

Answer 2

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

Answer 3

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

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

Answer 4

bien, me di Borgars responder en un plugin, aquí está:

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