Por lo tanto, parece que hay pocas maneras de manejar las imágenes rotas en una página html. Me gustaría saber cuáles son las formas de uso popular y qué formas se consideran mejores prácticas.

Para empezar he mirado a mí mismo como:

function imgErr(source) {     
    source.src = /images/missing.jpg";
    source.onerror = "";
    return true;
}
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" />

Pros: funciona cada vez, el evento siempre será atrapado. El usuario nunca ve la imagen rota. Parece funcionar bien en todos los navegadores. Contras: la etiqueta onerror requerida en cada imagen, la función imgErr (fuente) debe estar en la cabeza para detectar los errores, ralentiza el tiempo de carga experimentado por los usuarios

$('img').error(function(){
  $(this).attr('src', 'missing.jpg');
});

Ventajas: muy poco código, funciona en todas las imágenes sin cambiar su marca, puede colocarse fuera de la cabeza Contras: puede perderse el evento de error según la velocidad del evento de carga de las páginas, ralentiza el tiempo de carga experimentado por los usuarios

$(window).load(function() {
    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            var src = $(this).attr("src");
            var suffix = src.substring(src.length - 6, src.length).split('.')[0];
            suffix = suffix.charAt(suffix.length - 1);            
            $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg");
        }
    });
});

Pros: Puede colocarse en cualquier lugar de la página, arreglará las imágenes sin importar cuándo se ejecute, no ralentizará el tiempo de carga del usuario. Contras: muestra una imagen rota hasta que se ejecuta, creando una experiencia de usuario deficiente

En mi situación, el tiempo de carga es el mayor problema, ¡pero no puedo conseguir que la última opción funcione correctamente en IE, ya que los cambios se rompen y las imágenes no se rompen por igual!

Saludos, Denis