Fonction d'exécution javascript après chargement de l'image complète

Question

J'ai la ligne suivante de javascritp $("#hero_image img").attr('src', src); pour changer une image. Les lignes suivantes font alors tout ce qu'elles font en fonction de la nouvelle largeur d'images que j'appelais à travers $("#hero_image img").width();.

Cependant, comment puis-je m'assurer que cette image est complètement chargée avant d'obtenir la largeur, sinon je reviendrai avec l'ancienne largeur? La définition d'un délai d'attente n'est pas assez fiable.

Answer 1

Vous pouvez obtenir la largeur dans le gestionnaire d'événements .load() qui se déclenche après est complètement chargé, comme ceci:

$("#hero_image img").load(function() { 
    alert($(this).width()); 
}).attr('src', src); 

Si vous faites cela et réutilisant l'image, que ce soit lier la fois gestionnaire .load() , vous avez besoin d'un comportement différent à chaque fois que l'utilisation .one() il ne tient pas l'ajout un gestionnaire d'événements onload:

$("#hero_image img").one('load', function() { 
    alert($(this).width()); 
}).attr('src', src); 

Answer 2

$(function(){ // document ready 
    $('#hero_image img').bind('load', function(){ // image ready 
     // do stuff here 
    }); 
});