In der modernen Webentwicklung kann es vorkommen, dass Bilder nicht geladen werden. Um in solchen Fällen eine optimale Nutzererfahrung zu gewährleisten, ist es sinnvoll, eine Fallback-Lösung zu implementieren. Im folgenden Artikel zeigen wir Ihnen, wie Sie mit einer einfachen Funktion sicherstellen können, dass immer ein alternatives Bild angezeigt wird, selbst wenn das ursprüngliche Bild nicht verfügbar ist.
Die Bildlade-Fehlerbehebung
Die Funktion imageLoadError ist ein hilfreiches Script, das Ihnen dabei hilft, ein alternatives Bild anzuzeigen, wenn das ursprüngliche Bild nicht geladen werden kann. In diesem Fall verwenden wir ein Fallback-Bild, das in der Variablen fallbackImage definiert ist. Wenn der Ladevorgang eines Bildes fehlschlägt, wird das alternative Bild geladen, und alle zugehörigen SOURCE-Elemente werden ebenfalls angepasst.
Codebeispiel der Fehlerbehandlungsfunktion
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;
}
}So funktioniert die Funktion
Diese Funktion wird aufgerufen, wenn beim Laden eines Bildes ein Fehler auftritt. Zunächst wird das Attribut onerror entfernt, um eine Endlosschleife zu vermeiden. Das Bild-Source wird dann auf das Fallback-Bild gesetzt. Zusätzlich wird überprüft, ob sich vor dem Bild SOURCE-Elemente befinden und deren srcset ebenfalls aktualisiert.
Warum ist das wichtig?
Die Implementierung einer solchen Fehlerbehandlung ist entscheidend, um die Benutzerfreundlichkeit Ihrer Webseite zu verbessern. Ein kaputtes Bild kann die visuelle Ästhetik Ihrer Seite stark beeinträchtigen und die Nutzererfahrung negativ beeinflussen. Indem Sie Fallback-Bilder bereitstellen, sorgen Sie dafür, dass Ihre Webseite auch bei technischen Problemen ansprechend bleibt.
Evan Vucci/AP