jQuery/JavaScript para reemplazar imágenes rotas
Tengo una página web que incluye un montón de imágenes. A veces la imagen no está disponible, por lo que se muestra una imagen rota en el navegador del cliente.
¿Cómo uso jQuery para obtener el conjunto de imágenes, filtrarlo a imágenes rotas y luego reemplazar el src?
--Pensé que sería más fácil hacer esto con jQuery, pero resultó mucho más fácil usar una solución JavaScript pura, es decir, la proporcionada por Prestaul.
Maneja el onErrorevento de la imagen para reasignar su fuente usando JavaScript:
function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
<img src="image.png" onerror="imgError(this);"/>
O sin una función de JavaScript:
<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />
La siguiente tabla de compatibilidad enumera los navegadores que admiten la función de error:
http://www.quirksmode.org/dom/events/error.html
Yo uso el controlador integrado error:
$("img").error(function () {
$(this).unbind("error").attr("src", "broken.gif");
});
Editar: el error()método está obsoleto en jquery 1.8 y versiones posteriores. En su lugar, deberías utilizar .on("error"):
$("img").on("error", function () {
$(this).attr("src", "broken.gif");
});
En caso de que alguien como yo intente adjuntar el errorevento a una etiqueta HTML dinámica img, me gustaría señalar que hay un problema:
Aparentemente, imglos eventos de error no aparecen en la mayoría de los navegadores, al contrario de lo que dice el estándar .
Entonces, algo como lo siguiente no funcionará :
$(document).on('error', 'img', function () { ... })
Espero que esto sea útil para alguien más. Ojalá hubiera visto esto aquí en este hilo. Pero no lo hice. Entonces lo agrego
