all - jQuery o JavaScript: determine cuándo terminó de cargarse la imagen

jquery replace text

Question

¿Cómo puedo detectar cuando una imagen ha terminado de cargarse desde el servidor o la memoria caché del navegador? Quiero cargar varias imágenes en la misma <img/> y detectar cuándo ha finalizado la carga de una nueva imagen.

Gracias.

Answer 1

Bueno, este es un hilo bastante viejo que encontré ayer. Estoy usando backbone.js y require.js y cambiar el tamaño de mi diseño siempre causó problemas con las vistas que contienen imágenes.

Por lo tanto, necesitaba una forma de saber cuándo ha terminado de cargarse la última imagen para cambiar el tamaño del diseño. Todas las soluciones mencionadas anteriormente no funcionaron en mi caso. Después de algunas horas de investigación, encontré la solución definitiva que funciona:

http://desandro.github.com/imagesloaded/

Espero que eso ayude a otros también.

Answer 2

Creo que esto se ve un poco más limpio.

$(''img'').load(function() {
    // Your img has finished loading!
});

Answer 3

De una pregunta muy similar, la forma oficial de pedir a jQuery que espere a que se carguen todas las imágenes antes de ejecutar algo, y como Pikrass dice:

Con jQuery, usa $(document).ready() para ejecutar algo cuando se carga el DOM y $(window).load() para ejecutar algo cuando se cargan todas las demás cosas, como las imágenes.

Aquí hay dos ejemplos:

DOM

jQuery(document).ready(function(){
    console.log(''DOM ready'');
});

Imágenes / Todo lo demás

jQuery(window).load(function(){
    console.log(''all other things ready'');
});

Debes poder confirmar en tu consola:

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

Answer 4

El evento del documento onload se activará solo después de que todos los elementos, incluidas las imágenes, se hayan cargado por completo.

El evento onload <img> se activará después de que la imagen única se haya cargado completamente.

Así que puedes adjuntar un escucha a estos eventos, utilizando objetos jQuery o addEventListener de DOM (y attachEvent de IE)

Answer 5

Para una detección de carga de imágenes más completa, incluidas las imágenes cargadas desde la memoria caché, intente esto: https://github.com/paulirish/jquery.imgloaded

Answer 6

Todos mencionaron que el evento debe ser activado antes de establecerlo en el src.

Pero si no quiere preocuparse por eso, puede usar el evento de oncomplete (se disparará incluso con imágenes almacenadas en caché) para oncomplete la oncomplete , como esto:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Al usar jQuery, no tiene que preocuparse por la compatibilidad con versiones anteriores (por ejemplo: img.height>0 en IE )

Answer 7

$(''img'').on(''load'', function() {
    // do whatever you want
});