¿Cómo saber si una imagen se carga o almacena en caché en JQuery?

Question

Parece que la función .load() no se dispara si la imagen se ha guardado antes. Así que si usted quiere asegurarse de que uno ha cargado imágenes antes de cargar y mostrar otra (es decir Lupa) no se puede hacer algo como:

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png"); 

Entonces, ¿cómo garantizar el orden de carga en jQuery?

Answer 1

Lo que tendrá que hacer es manejar sus encuadernaciones de carga de manera selectiva. Puede verificar la carga probando la propiedad del objeto Imagen complete.

Por ejemplo:

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

}); 

Nota que anteriormente, this (usado solo) se refiere a la referencia de DOM al objeto imagen proporcionada por jQuery.

Answer 2

Gracias Sparkey,

Voy a dar que un intento pero se ve bien. He encontrado una extensa discusión sobre el tema aquí: http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

que me llevan a "Plugin jQuery 'onImagesLoad'" el aquí: http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

que parece resolver el problema de esta manera:

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
}); 

Lo que prácticamente se reduce a lo que dices, solo su verificación completa también prueba "indefinido".

Answer 3

Si desea envolver toda esta funcionalidad en un método de extensión de jQuery, probar este (que deberían funcionar a la espera de cualquier número de imágenes):

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
} 

y luego sólo tiene que utilizar la siguiente manera:

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
}); 

Answer 4

También puede verificar si su imagen tiene un ancho o alto para detectar si ya se ha cargado.

Por ejemplo:

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}