Bessere Handhabung defekter Bilder

Avatar of Chris Coyier
Chris Coyier am

Fehlende Bilder zeigen entweder gar nichts an oder eine Box im Stil von [ ? ], wenn ihre Quelle nicht gefunden werden kann. Stattdessen möchten Sie dies vielleicht durch eine "fehlende Bild"-Grafik ersetzen, von der Sie sicher sind, dass sie existiert, um eine bessere visuelle Rückmeldung zu geben, dass etwas nicht stimmt. Oder Sie möchten es vielleicht komplett ausblenden. Dies ist möglich, da Bilder, die ein Browser nicht finden kann, ein "error"-JavaScript-Ereignis auslösen, das wir beobachten können.

// Replace source
$('img').on("error", function() {
  $(this).attr('src', '/images/missing.png');
});

// Or, hide them
$("img").on("error", function() {
  $(this).hide();
});

Zusätzlich möchten Sie möglicherweise eine Art Ajax-Aktion auslösen, um eine E-Mail an einen Website-Administrator zu senden, wenn dies geschieht.