img - obtener src de imagen jquery

jquery callback 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. Que puedo hacer usando:

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

Pero después de leer varias publicaciones, no todos los navegadores activan la carga si la imagen está en caché. Parece que no estoy teniendo este problema en el navegador que está destinado 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 la PC. Estoy ejecutando versiones bastante recientes de los navegadores, así que algo ha cambiado en estos ahora para cargar la carga. O mi otro pensamiento es que estoy ejecutando la última versión de jquery (1.6.3) ¿se ha modificado .load?

Espero que todo tenga que ver con la ejecución de la última versión de jQuery, pero si no es así y es un problema anterior del navegador, entonces necesito solucionarlo. He probado un par de soluciones en este sitio, por ejemplo: jQuery cargando imágenes con devolución de llamada completa Y también algunos de los comentarios en la página .load api: http://api.jquery.com/load-event/#comment-30211903

Pero parece que no puedo hacer que funcionen. El primero no funciona en absoluto y el segundo parece caer con el .each ().

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

$.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.

segundo

Answer 1

Basándome en algunas pruebas que hice hace aproximadamente un año, no encontré una forma confiable de obtener un evento de carga al cambiar el .src de una imagen 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 (se usa en una presentación de diapositivas) desde hace aproximadamente un año, así que sé que funciona.

Si configura el controlador de carga ANTES de establecer la propiedad .src en una nueva imagen, obtendrá el evento de carga de manera confiable. Aquí hay algo de código que escribí el día anterior para capturar el evento de carga: jQuery: ¿Cómo comprobar cuándo se cargan todas las imágenes en una matriz? .

Este código que adjunta el controlador de eventos ANTES de configurar el .src funciona para mí en los navegadores modernos en los que lo probé (no probé los navegadores antiguos):

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

Puede verlo funcionar aquí: http://jsfiddle.net/jfriend00/hmP5M/ y puede probar cualquier navegador que desee con ese jsFiddle. Simplemente haga clic en la imagen para que cargue una nueva imagen. Recorre 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. Envía un mensaje a la pantalla cada vez que se llama al controlador de carga para que pueda ver si se llama.