Ein häufiges Problem beim Laden von Bildern auf Webseiten ist der Fehler, wenn grafische Inhalte nicht angezeigt werden. Um dieses Problem zu lösen, kann eine Funktion implementiert werden, die ein Fallback-Bild anzeigt, wenn das ursprünglich geplante Bild nicht geladen werden kann.
Die Funktion zur Bildfehlerbehandlung
Die folgende JavaScript-Funktion „imageLoadError“ sorgt dafür, dass ein alternatives Bild angezeigt wird, wenn das Hauptbild aufgrund eines Fehlers nicht geladen werden kann. Hierbei wird ein Standardbild definiert, das als Fallback genutzt wird.
Implementierung der Funktion
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;
}
}
Wichtige Aspekte der Funktion
- Die Funktion entfernt zunächst das „onerror“-Attribut des Bildes, um eine Endlosschleife bei Fehlern zu vermeiden.
- Das Fallback-Bild wird dann als Quelle für das Bild festgelegt.
- Zusätzlich wird überprüft, ob es vorhergehende „SOURCE“-Elemente gibt, die ebenfalls aktualisiert werden müssen, damit das Fallback korrekt funktioniert.
Fazit
Die Implementierung einer solchen Funktion kann die Benutzererfahrung deutlich verbessern, indem sie sicherstellt, dass anstelle eines leeren Bildbereichs immer ein ansprechendes Bild angezeigt wird. So bleibt die Webseite auch bei Ladeproblemen visuell ansprechend.
© Getty Images/AP
