javascript ejecutando la función después de cargar la imagen completa

Question

Tengo la siguiente línea de javascritp $("#hero_image img").attr('src', src); para cambiar una imagen. Las siguientes líneas hacen lo que sea que hagan basándose en el nuevo ancho de imágenes al que estaba llamando a través del $("#hero_image img").width();.

Sin embargo, ¿cómo me aseguro de que esta imagen se haya cargado por completo antes de obtener el ancho, de lo contrario me devolverán con el ancho anterior? Establecer un tiempo de espera no es lo suficientemente confiable.

Answer 1

Usted puede obtener el ancho en el controlador .load() evento que dispara después de que se ha cargado completamente, como este:

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

Si usted está haciendo esto y re-uso de la imagen, o bien se unen al controlador .load() vez , de lo que necesita un comportamiento diferente cada vez que utilice .one() por lo que no guarda añadir un manejador de eventos 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 
    }); 
});