Wenn Bilder auf Webseiten nicht korrekt geladen werden, kann dies zu einer schlechten Benutzererfahrung führen. Um dieses Problem zu lösen, können wir eine einfache JavaScript-Funktion implementieren, die ein alternatives Bild anzeigt, falls das ursprüngliche Bild nicht geladen werden kann. Dies verbessert die Nutzererfahrung erheblich.
Die Funktion zur Fehlerbehandlung von Bildern
Die folgende Funktion namens imageLoadError befasst sich mit dem Problem des Bildladens. Wenn ein Bild nicht geladen werden kann, wird ein Ersatzbild angezeigt. Hier ist eine kurze Erklärung, wie dies funktioniert:
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;
}
}
Funktionsweise der Fehlerbehandlung
In dieser Funktion wird zunächst der Pfad zum Ersatzbild definiert. Wenn das ursprüngliche Bild nicht geladen werden kann, entfernt die Funktion das onerror-Attribut des Bildes, um zu verhindern, dass die Funktion erneut ausgelöst wird. Anschließend wird das src-Attribut des Bildes auf das Ersatzbild gesetzt.
Handling von SOURCE-Elementen
Zusätzlich wird eine Schleife verwendet, um alle vorhergehenden SOURCE-Elemente zu durchlaufen und deren srcset-Attribute ebenfalls auf das Ersatzbild zu setzen, falls vorhanden. Dies sorgt dafür, dass auch responsive Bilder korrekt behandelt werden.
Fazit
Durch die Implementierung dieser Fehlerbehandlungsfunktion für Bilder kann gewährleistet werden, dass bei einem Ladefehler stets ein ansprechendes Bild angezeigt wird, was die Gesamterfahrung der Benutzer auf der Webseite verbessert.
Bildnachweis: Roman Pilipey/AFP/Getty Images
