Image onload per immagini statiche

Question

So che per il caricamento onload dell'immagine devi impostare lo src dopo che il gestore onload è stato collegato. Tuttavia voglio collegare i gestori di carichi su immagini statiche nel mio HTML. In questo momento lo faccio nel modo seguente (utilizzando jQquery):

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

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

Ma questo è piuttosto brutto e ha il flusso ovvio che può essere fatto solo per i selettori che corrispondono a un solo Immagine. C'è un altro modo migliore per farlo?

modificare
Quello che volevo dire da che può essere fatto solo per selettore che corrisponde a una sola immagine è che quando si fa questo:

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

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

che entrambe le immagini saranno have src = 'picture.jpg'

Answer 1

È possibile attivare l'evento (o è handler) direttamente chiamando .trigger() o .load().

Se si sa che si desidera che l'evento, perché si sa che le immagini sono già caricati, allora si può fare in questo modo:

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

Se si esegue lo script sul documento pronto o qualche momento dove non è ancora chiaro se le immagini sono lì o no, quindi vorrei usare qualcosa di simile:

$('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'); 
    } 
    }); 

sappiate che le bolle di evento di carico (jQuery 1.3) e si potrebbe eventualmente essere innescando un gestore del carico sul documento prematuramente se non si annulla la bolla in gestore img.

Per la cronaca: la soluzione di attivazione img.src=img.src purtroppo non funzionerà correttamente su Safari. Dovrai impostare lo src su qualcos'altro (come # o su: blank) e poi tornare indietro per ricaricare.

Answer 2

Immagino che questa sia davvero una domanda sul selettore jQuery S. Se desideri abbinare tutti gli elementi dell'immagine, puoi utilizzare img invece di #img1 come selettore.

Answer 3

Aggiungere una classe alle immagini in cui si desidera questa funzionalità e utilizzare tale classe nel selettore jQuery.

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

Answer 4

Va bene, ho girato Borgars rispondere in un plugin, eccolo:

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