Häufig kommt es vor, dass Bilder auf Webseiten nicht korrekt geladen werden. In solchen Fällen ist es wichtig, eine Backup-Lösung parat zu haben, um die Nutzererfahrung nicht zu beeinträchtigen. Der folgende JavaScript-Code bietet eine einfache Möglichkeit, ein Fallback-Bild zu verwenden, falls das originale Bild fehlerhaft ist.
Was ist ein Fallback-Bild?
Ein Fallback-Bild ist ein vordefiniertes Bild, das angezeigt wird, wenn das Hauptbild aus irgendeinem Grund nicht geladen werden kann. Dies hilft, visuelle Störungen auf der Webseite zu minimieren und die Benutzererfahrung zu verbessern.
Der JavaScript-Code für Bildfehlerbehandlung
function imageLoadError(img) {
const fallbackImage = "/media/sites/cnn/cnn-fallback-image.jpg";
img.removeAttribute('onerror'); // Fehlerbehandlung deaktivieren
img.src = fallbackImage; // Setze das Fallback-Bild
let element = img.previousElementSibling;
// Aktualisiere auch die Quellen für die Bildbearbeitung
while (element && element.tagName === 'SOURCE') {
element.srcset = fallbackImage;
element = element.previousElementSibling;
}
}Wie funktioniert der Code?
Der Code überprüft, ob ein Bild nicht geladen werden kann. Wenn dies der Fall ist, wird das Fallback-Bild festgelegt und auch alle vorhergehenden SOURCE-Elemente werden aktualisiert. So bleibt die Bildqualität auf der Webseite gleich, selbst wenn das ursprüngliche Bild nicht verfügbar ist.
Wie integriert man diesen Code in die Webseite?
Um diese Fehlerbehandlungsfunktion zu nutzen, fügt man den JavaScript-Code einfach in die vorhandene Skriptdatei oder innerhalb der -Tags in HTML ein. Außerdem sollte man sicherstellen, dass die onerror-Eigenschaft für die Bilder korrekt zugewiesen ist, damit diese Funktion bei einem Ladefehler aufgerufen wird.
Fazit
Die Implementierung eines Fallback-Bildes ist eine einfache, aber effektive Möglichkeit, die Benutzererfahrung auf Ihrer Webseite zu verbessern. Indem Sie sicherstellen, dass immer ein Bild angezeigt wird, selbst wenn das Original nicht lädt, können Sie die Verweildauer der Besucher erhöhen und die Ästhetik Ihrer Seite bewahren.
Franck Fife/AFP/Getty Images