Fehler beim Laden von Bildern können frustrierend sein, insbesondere in einer digitalen Welt, in der ansprechende visuelle Inhalte entscheidend sind. Um dieser Herausforderung entgegenzuwirken, kann eine einfache JavaScript-Funktion helfen, die automatisch ein alternatives Bild anzeigt, wenn das ursprüngliche Bild nicht geladen werden kann.

Die Funktion im Detail

Die Funktion imageLoadError nimmt ein Bild-Element als Parameter entgegen. Wenn ein Bild nicht geladen werden kann, wird ein Ersatzbild angezeigt, das sich auf einer vordefinierten URL befindet. Hier ist der grundlegende Ablauf:

  • Das Bild-Element wird bearbeitet, um den Fehlerstatus zu entfernen.
  • Das Ersatzbild wird als Quelle gesetzt.
  • Zusätzlich wird geprüft, ob es vorherige SOURCE-Elemente gibt, die ein srcset haben. Falls vorhanden, wird auch für diese das Ersatzbild gesetzt.

So implementieren Sie die Funktion

Um die Funktion zu verwenden, können Sie folgenden Code in Ihre Webseite einfügen:

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;
    }
}

Live Updates und Bildquellen

Diese Methode kann leicht in Seiten integriert werden, die regelmäßig aktualisierte Inhalte oder „Live Updates“ bieten. Wenn Bilder aus externen Quellen geladen werden, minimiert diese Funktion das Risiko darstellungsbedingter Fehler, was die Benutzererfahrung erheblich verbessert.

Um das visuelle Erlebnis zu optimieren, sollten Sie auch darauf achten, qualitativ hochwertige Bilder zu verwenden, die zu Ihren Inhalten passen.

Werbung
Hier könnte Ihr Advertorial stehen
Ein Advertorial bietet Unternehmen die Möglichkeit, ihre Botschaft direkt im redaktionellen Umfeld zu platzieren

Fazit

Die Handhabung von Bildladefehlern ist ein wichtiger Aspekt der Webentwicklung. Mit der oben beschriebenen Methode können Sie sicherstellen, dass Ihre Webseite immer ansprechend bleibt, selbst wenn technische Probleme auftreten. Durch die Implementierung solch einfacher Funktionen erhöhen Sie die Nutzerzufriedenheit und fördern die Interaktion mit Ihrer Webseite.

Getty Images