Detectar carga de la imagen

Question

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

Answer 1

Puede utilizar el href="http://api.jquery.com/load-event/" rel="noreferrer"> .load() controlador de eventos

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

Esté seguro para adjuntarlo antes Configuración de la fuente, o el evento pudo haber disparado antes de que ha conectado un controlador para escuchar por ella (por ejemplo, la carga de la memoria caché).

Si ese 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 que una gran cantidad horrible de código, pero ... no he encontrado ninguna otra manera de comprobar si la imagen se ha cargado.

Answer 4

Uso de jQuery en la función ( 'carga') es la forma correcta para comprobar si se carga la imagen. Pero tenga en cuenta que el sobre ( 'carga') la función no funcionará si la imagen ya está en la memoria 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

Es fácil con jQuery:

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

Si lo intentó con:

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

pero que no va a comprobar si la imagen es de carga. Ese fuego hacerse si el código es de carga. De lo contrario se puede comprobar si el código se llevó a cabo a continuación, disparar la función de carga img y comprobar si la imagen está muy cargado. 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...
   });
}) ;

Answer 6

Creo que esto le puede ayudar un poco:

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

Por lo tanto, si se ha cargado - se mostrará imagen original. En otro - se muestra en la imagen, que contiene hecho con la imagen estrellado o 404 HTTP Header

.