Chargement d'image pour les images statiques

Question

Je sais que pour que l'image de chargement fonctionne, vous devez définir le src après que le gestionnaire de chargement a été attaché. Cependant, je veux attacher des gestionnaires de charge à des images qui sont statiques dans mon HTML. En ce moment, je fais que de la manière suivante (en utilisant jQquery):

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

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

Mais ceci est plutôt laid et a le flux évident qu'il ne peut être fait pour les sélecteurs qui correspondent à une seule image. Y a-t-il une autre façon plus agréable de le faire?

modifier
Ce que je voulais dire par là qu'il ne peut être fait pour sélecteur qui correspondent à une seule image est que lorsque vous faites ceci:

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

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

que les deux images ai src = 'picture.jpg'

Answer 1

Vous pouvez déclencher l'événement (ou il est gestionnaire) directement en appelant .trigger() ou .load().

Si vous savez que vous voulez l'événement, parce que vous savez que les images sont déjà chargées, vous pouvez le faire comme ceci:

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

Si vous utilisez votre script sur le document prêt ou un moment où il est pas encore clair si les images sont là ou non, alors j'utiliser quelque chose comme ceci:

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

averti que les bulles d'événement de charge (jQuery 1.3) et vous pourriez peut-être le déclenchement d'un gestionnaire de charge sur le document prématurément si vous n'annulez pas la bulle dans le img gestionnaire. Pour l'anecdote: La solution de déclenchement img.src=img.src ne fonctionnera malheureusement pas correctement sur Safari. Vous devrez définir le src sur autre chose (comme # ou environ: vide), puis de nouveau pour que le rechargement se produise.

Answer 2

Je suppose que c'est vraiment une question à propos de jQuery selector s. Si vous souhaitez associer tous vos éléments d'image, vous pouvez utiliser img au lieu de #img1 comme sélecteur.

Answer 3

Ajoutez une classe aux images dans lesquelles vous souhaitez cette fonctionnalité et utilisez cette classe dans le sélecteur jQuery.

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

Answer 4

D'accord, je me suis tourné dans un Borgars répondre plug-in, la voici:

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