Eine funktionale Lösung zur Behandlung von Bildladefehlern bietet die Möglichkeit, ein Fallback-Bild anzuzeigen, wenn das gewünschte Bild nicht geladen werden kann. Diese Technik kann in verschiedenen Webanwendungen entscheidend sein, um eine bessere Benutzererfahrung zu gewährleisten.
Fehlerbehandlung für Bilder
Die folgende Funktion imageLoadError(img) wird aufgerufen, wenn es Probleme beim Laden eines Bildes gibt. Sie ersetzt das defekte Bild durch ein vordefiniertes Fallback-Bild.
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 Fallback-Implementierung
In dieser Funktion wird zunächst ein Fallback-Bild definiert. Wenn das ursprüngliche Bild nicht angezeigt werden kann, wird das Attribut onerror entfernt, um eine Endlosschleife zu verhindern, und der src-Wert des Bildes wird auf das Fallback-Bild gesetzt. Zusätzlich werden alle vorhergehenden SOURCE-Elemente, die möglicherweise für Responsive Images verwendet werden, ebenfalls aktualisiert, damit sie das Fallback-Bild verwenden.
Vorteile von Fallback-Bildern
Die Verwendung von Fallback-Bildern verbessert die Benutzererfahrung erheblich, da sie verhindern, dass leere Plätze auf der Webseite angezeigt werden. Stattdessen sehen die Besucher ein ansprechendes Bild, was das optische Design der Webseite bewahrt.
Live-Updates und Nachrichten
In der Welt der Nachrichten ist es besonders wichtig, dass Inhalte aktuell und jederzeit verfügbar sind. Die Möglichkeit, Bilder effizient zu laden, trägt maßgeblich dazu bei, dass Informationen schnell und reibungslos bereitgestellt werden können.
Foto: Alex Wroblewski/AFP/Getty Images