Cómo ocultar imágenes rotas en IE usando jQuery?

Question

He intentado copiar este código desde el sitio de jQuery, pero falla en IE7/IE8, pero funciona en otros navegadores. Lo que está mal con este código, es del sitio jQuery (http://api.jquery.com/error/). Estoy usando jQuery versión 1.4.4.

$(document).ready(function(){ 
    $("img").error(function(){ 
    $(this).hide();  
    });  
}); 

Answer 1

El problema es que por el momento se ejecuta $(document.ready), la imagen ya ha terminado de cargar por lo que los eventos de carga/error no se activarán más.

La única manera que puedo pensar para evitar esto es para recargar la imagen, por lo tanto "fuerza", el evento que se active:

$(document).ready(function(){ 
    $("img").each(function(index) { 
     $(this).error(function() { 
      $(this).hide();  
     }); 
     $(this).attr("src", $(this).attr("src")); 
    });  
}); 

No debería ser tan malo en el rendimiento ya que las imágenes se se tomará probablemente de la memoria caché, no realmente recargados del servidor.

caso de prueba en vivo (con gatos frescos;)) está disponible aquí: http://jsfiddle.net/yahavbr/QvnBC/1/

Answer 2

Utilizando la solución anterior se sigue causar una breve aparición del 'roto imagen del icono', porque hay una latencia entre error() y hide() .

Utilicé el jQuery imagesloaded plugin que permite la devolución de llamada cuando la imagen se carga correctamente. Primero configuro la imagen a visibility:hidden. Entonces me puse a visible vez cargado correctamente:

$('div.target img').each(function(){ 
    $(this).imagesLoaded(function(){ 
    $(this).css('visibility','visible'); 
    }) 
}) 

Este utiliza un recurso poco más, pero evitará que el 'icono de imagen rota' de mostrar en absoluto. No utilizo este sitio, sino solo secciones donde la imagen rota es posible.

Answer 3

En mi caso en IE8, la imagen de reemplazo todavía no se estaba cargando. El código a continuación me solucionó esto. Puede que tenga que jugar con la demora de tiempo de espera para averiguar qué funciona mejor.

setTimeout(function() { 
    $("img").each(function() { 
     $(this).error(function() { 
      $(this).attr("src", "../imageupload/image-failed.png"); 
     }); 
     $(this).attr("src", $(this).attr("src")); 
    }); 
}, 100);