Fehler beim Laden von Bildern können für Webseitenbetreiber eine Herausforderung darstellen. Eine effektive Methode zur Handhabung solcher Probleme ist die Verwendung von Platzhalterbildern. Im Folgenden erfahren Sie, wie Sie mithilfe von JavaScript eine Lösung implementieren können, um das Nutzererlebnis zu verbessern.
Fehlerbehandlung bei Bildern
Die folgende Funktion imageLoadError nimmt ein Bild-Element als Parameter und ersetzt das fehlerhafte Bild durch ein vordefiniertes Fallback-Bild. Dies stellt sicher, dass die Webseite weiterhin ansprechend aussieht, auch wenn ein Bild nicht geladen werden kann.
So funktioniert der Code
function imageLoadError(img) {
const fallbackImage="/media/sites/cnn/cnn-fallback-image.jpg";
img.removeAttribute('onerror');
img.src = fallbackImage;
let element = img.previousElementSibling;
while (element && element.tagName === 'SOURCE') {
element.srcset = fallbackImage;
element = element.previousElementSibling;
}
}Implementierung des Fallback-Bildes
Wenn ein Bild nicht geladen werden kann, ruft die Funktion imageLoadError das Fallback-Bild auf und entfernt das ursprüngliche onerror-Attribut. Zusätzlich wird überprüft, ob vorhergehende SOURCE-Elemente existieren, um auch deren Quellen auf das Fallback-Bild zu setzen. Diese Vorgehensweise optimiert die Darstellung der Webseite erheblich.
Fazit
Durch das Implementieren dieser Funktion stellen Sie sicher, dass Besucher Ihrer Webseite ein konsistentes und visuell ansprechendes Erlebnis haben, auch wenn es technische Probleme mit Bilddateien gibt. Ein geschickter Einsatz von Platzhalterbildern kann dazu beitragen, das Nutzerengagement zu erhöhen und die allgemeine Benutzererfahrung zu verbessern.
Bildquelle: Justin Sullivan/Getty Images
