Wydaje się więc, że jest kilka sposobów radzenia sobie z uszkodzonymi obrazkami na stronie html. Chciałbym wiedzieć, w jaki sposób popularne są popularne sposoby i jakie są postrzegane jako najlepsze praktyki?

Na początek przyjrzałem się trochę jak:

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

Plusy: działa za każdym razem, wydarzenie zawsze zostanie złapane. Użytkownik nigdy nie widzi złamanego obrazu. Wydaje się działać dobrze we wszystkich przeglądarkach. Wady: wymagany znacznik onerror na każdym obrazie, funkcja imgErr (źródło) musi znajdować się w głowie, aby złapać błędy, spowalnia czas przeładowania przez użytkowników

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

Plusy: bardzo mały kod, działa na wszystkich obrazach bez zmiany ich znaczników, może znajdować się poza głową Wady: może przegapić zdarzenie błędu w zależności od szybkości zdarzenia onload, spowalnia czas przeładowania przez użytkowników

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

Zalety: Można umieścić w dowolnym miejscu na stronie, naprawi obrazy bez względu na to, kiedy się uruchomi, nie spowolni doświadczania czasu ładowania. Wady: pokazuje zepsuty obraz, dopóki nie uruchomi się, powodując słabe wrażenia użytkownika

W mojej sytuacji czas ładowania jest największym problemem, ale nie mogę uzyskać ostatniej opcji poprawnej pracy w IE, ponieważ zmienia się ona i nie ma złamanych obrazów!

Pozdrawiam, Denis