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

onerror javascript ejemplo

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 cuando se ejecuta $(document.ready) , la imagen ya ha terminado de cargarse, por lo que los eventos de carga / error ya no se activarán.

La única forma en que se me ocurre evitar esto es volver a cargar la imagen, así "fuerce" el evento para 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 demasiado malo para el rendimiento, ya que las imágenes se tomarán probablemente de la memoria caché, no realmente recargados del servidor.

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

Answer 2

El uso de la solución anterior aún causará una breve aparición del ''ícono de imagen rota'', porque hay una latencia entre error() y hide() .

Usé el plugin jQuery imagesloaded que permite la devolución de llamada cuando la imagen se cargó correctamente. Primero configuro la imagen para visibility:hidden . Luego lo configuro como visible cuando se carga correctamente:

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

Esto utiliza un poco más de recursos, pero evitará que se muestre el "icono de imagen interrumpida". No utilizo este sitio, sino solo secciones donde la imagen rota es posible.

Answer 3

En mi caso en IE8, mi 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);