Detectar carga de imagen

Question

¿Es posible detectar una vez que se ha cargado una imagen con jQuery?

Answer 1

se puede utilizar el controlador de .load() caso, como este:

$("#myImg").load(function() { 
    alert('I loaded!'); 
}).attr('src', 'myImage.jpg'); 

Asegúrese de adjuntarlo antes establecer la fuente, o el evento pudo haber disparado antes de que ha conectado un controlador para escuchar por ella (por ejemplo, cargar desde la memoria caché).

Si eso es no factible (ajuste de la src después de la unión), asegúrese de comprobar si está cargado y disparar usted mismo, de esta manera:

$("#myImg").load(function() { 
    alert('I loaded!'); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

Answer 2

Es tan fácil de usar llanura Javascript:

// Create new image 
var img = new Image(); 

    // Create var for image source 
var imageSrc = "http://example.com/blah.jpg"; 

    // define what happens once the image is loaded. 
img.onload = function() { 
    // Stuff to do after image load (jQuery and all that) 
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded. 
}; 

    // Attach the source last. 
    // The onload function will now trigger once it's loaded. 
img.src = imageSrc; 

Answer 3

también he estado investigando esto durante mucho tiempo, y he encontrado este plugin para maravillosamente ayuda con esto: https://github.com/desandro/imagesloaded

Parece una gran cantidad de código, pero ... No encontré otra forma de verificar cuando se cargó una imagen.

Answer 4

El uso de la función jQuery on ('carga') es la forma correcta de comprobar si la imagen está cargada. Pero tenga en cuenta que la función de encendido ('carga') no funcionará si la imagen ya está en caché.

var myImage = $('#image_id'); 
//check if the image is already on cache 
if(myImage.prop('complete')){ 
    //codes here 
}else{ 
    /* Call the codes/function after the image is loaded */ 
    myImage.on('load',function(){ 
      //codes here 
    }); 
} 

Answer 5

creo que esto le puede ayudar un poco:

$('img').error(function(){ 
     $(this).attr(src : 'no_img.png'); 
}) 

Así, si carga - se mostrará imagen original. En el otro, se mostrará la imagen, que contiene datos con la imagen bloqueada o el encabezado HTTP 404.

Answer 6

Es fácil con jQuery:

$('img').load(function(){ 
    //do something 
}); 

Si intentó con:

$('tag')html().promise().done(function(){ 
    //do something 
}) ; 

pero eso no va a comprobar si la imagen es de carga. Ese fuego hecho si el código es de carga. De lo contrario, puede verificar si el código fue hecho, luego disparar la función de carga img y verificar si la imagen está realmente cargada. Así que hacemos una combinación de ambos:

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
    $('img').load(function(){ 
    //do something like show fadein etc... 
    }); 
}) ;