Portanto, parece haver algumas maneiras de lidar com imagens quebradas em uma página html. Gostaria de saber quais são as formas de uso popular e quais são as melhores práticas?

Para começar, olhei para alguns como:

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

Prós: funciona sempre, o evento será sempre apanhado. O usuário nunca vê imagem quebrada. Parece funcionar bem nos navegadores. Contras: onerror tag necessária em cada imagem, função imgErr (fonte) precisa estar na cabeça para pegar os erros, atrasa os usuários experimentaram o tempo de carregamento

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

Prós: muito pouco código, funciona em todas as imagens sem alterar sua marcação, pode ser colocado fora da cabeça Contras: pode perder o evento de erro dependendo da velocidade do evento onload de páginas, retarda o tempo de carregamento de usuários experientes

$(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");
        }
    });
});

Prós: Pode ser colocado em qualquer lugar da página, consertará as imagens não importa quando for executado, não atrasará o tempo de carregamento dos usuários experientes Contras: mostra uma imagem quebrada até que seja executada criando uma experiência de usuário ruim

Na minha situação, o tempo de carregamento é o maior problema, mas não consigo fazer com que a última opção funcione corretamente no IE, já que ela muda de forma quebrada e nenhuma imagem quebrada é igual!

Felicidades, Denis