jquery devolución de llamada en carga de imagen al cambiar el src

Question

Estoy cambiando el img src una vez que he cargado un archivo json, todo esto funciona bien. Pero quiero asegurarme de que la imagen esté completamente cargada. ¿Qué puedo hacer usando:

 .one("load",function(){ 
       alert("image has load yay"); 
      }); 

Pero después de leer varios mensajes que no todos los navegadores disparan la carga si la imagen está en la memoria caché. Parece que no estoy obteniendo este problema en el navegador que están destinados a causar este problema. Pero solo he probado FF (6.0.2), Chrome (13.0.7) y Safari (5.0.5) en un mac. Ahora estoy seguro de que IE debe tener un problema y solo está relacionado con PC. Estoy ejecutando versiones bastante recientes de los navegadores, así que ha cambiado algo en esto para ahora disparar la carga. ¿O mi otro pensamiento es que estoy ejecutando la última versión de jquery (1.6.3) que se ha cambiado .load?

Espero que todo tenga que ver con ejecutar el último jquery, pero si no es así y es un problema del navegador anterior, entonces tengo que poner una solución. He intentado un par de solución en este sitio, por ejemplo: jQuery loading images with complete callback Y también algunos de los comentarios en la página .load api: http://api.jquery.com/load-event/#comment-30211903

Pero me parece que no puede llegar a trabajar. El primero no funciona en absoluto y el segundo parece fallar con .each().

Este es el código que tengo hasta ahora que parece funcionar bien, pero no puedo estar seguro ya que tal vez un problema con el navegador anterior.

$.getJSON(jsonURL, function(json) {   
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
     alert("the image has loaded"); 
    //do something here 
    }); 
$("a.imgZoom").attr("href", json[imageID].largeImage); 
}) 

Gracias de antemano por cualquier ayuda.

B

Answer 1

Sobre la base de algunas pruebas que hice hace aproximadamente un año, no he encontrado ninguna forma confiable de obtener un evento de carga cuando se cambia el .src de una imagen a partir de un valor a otro. Como tal, tuve que recurrir a cargar una nueva imagen y reemplazar la que tenía con la nueva cuando se cargó la nueva imagen. Ese código se ha estado ejecutando con éxito en varios cientos de sitios web (es utilizado por una presentación de diapositivas) durante aproximadamente un año, así que sé que funciona.

Si configura el manejador de carga ANTES de configurar la propiedad .src en una nueva imagen, obtendrá el evento load de manera confiable. Aquí hay un código que escribí justo hoy para capturar el evento de carga: jQuery: How to check when all images in an array are loaded?.

Este código que se conecta al controlador de eventos ANTES configuración de la .src funciona para mí en los navegadores modernos que he probado en (No he probado los navegadores antiguos):

$("img").one("load", function() { 
     // image loaded here 
    }).attr("src", url); 

Se puede ver trabaje aquí: http://jsfiddle.net/jfriend00/hmP5M/ y puede probar cualquier navegador que desee utilizando ese jsFiddle. Simplemente haga clic en la imagen para que cargue una nueva imagen. Hace un ciclo a través de tres imágenes diferentes (configurando .src cada vez), cargando dos de ellas de manera única cada vez (nunca desde el caché) y una desde el caché para probar ambos casos. Emite un mensaje a la pantalla cada vez que se llama al controlador .load para que pueda ver si se llama.