In der heutigen digitalen Welt sind Bilder ein wesentlicher Bestandteil unserer Online-Erfahrungen. Doch was passiert, wenn ein Bild nicht geladen werden kann? Hier kommen Fallback-Lösungen ins Spiel, die sicherstellen, dass der Nutzer dennoch eine ansprechende visuelle Erfahrung hat.
Fallbacks für Bildfehler
Eine effektive Methode, um mit Bildladefehlern umzugehen, ist die Verwendung von Fallback-Bildern. Diese Bilder werden angezeigt, wenn das ursprüngliche Bild aufgrund technischer Probleme oder erhaltener Daten nicht geladen werden kann. Ein schlichter, aber wirkungsvoller Code, wie der nachfolgende, zeigt, wie man solch eine Lösung umsetzen kann:
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 der Code
Der obige JavaScript-Code definiert eine Funktion, die ausgelöst wird, wenn ein Bild nicht geladen werden kann. Zunächst wird ein Fallback-Bild festgelegt. Anschließend wird das Attribut ‚onerror‘ vom ursprünglichen Bild entfernt, um zu verhindern, dass die Fehlerroutine erneut ausgeführt wird. Danach wird die Quelle des ursprünglichen Bildes auf das Fallback-Bild gesetzt.
Zusätzlich wird überprüft, ob es vorherige SOURCE-Elemente gibt und deren srcset ebenfalls angepasst, damit alle möglichen Inhalte korrekt angezeigt werden. Diese Vorgehensweise sorgt für eine nahtlose Benutzererfahrung und lässt die Webseite selbst bei Fehlern professionell aussehen.
Fazit
Die Implementierung von Fallback-Lösungen ist entscheidend, um die visuelle Integrität Ihrer Webseite zu wahren. Durch die Anwendung des oben genannten Codes können Sie sicherstellen, dass Ihre Nutzer auch bei Bildladefehlern nicht stranden. Denken Sie daran, dass ansprechende und funktionale Webseiten die Nutzererfahrung maßgeblich verbessern können.
Für weitere Informationen und technische Unterstützung stehen Ihnen zahlreiche Online-Ressourcen zur Verfügung.
Daria Tarasova-Markina/CNN