Bildladefehler-Funktion mit Fallback-Bild für CNN-Artikel

Ein häufiges Problem, das viele Nutzer im Internet erleben, ist das Fehlschlagen beim Laden von Bildern. Um sicherzustellen, dass Ihre Website auch bei Ladefehlern ansprechend bleibt, können Sie eine einfache Funktion erstellen, die ein alternatives Bild anzeigt. Ein Beispiel hierfür finden Sie im folgenden Code:

Fehlerbehandlung für Bilder

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

Wie die Funktion funktioniert

Diese Funktion wird aufgerufen, wenn ein Bild nicht geladen werden kann. Sie ersetzt das fehlgeschlagene Bild durch ein vordefiniertes Fallback-Bild. Auf diese Weise sorgt die Funktion dafür, dass die Website weiterhin ansprechend aussieht, selbst wenn bestimmte Inhalte fehlen.

Integration der Funktion in Ihre Webseite

Um diese Funktion auf Ihrer Webseite zu verwenden, fügen Sie einfach den obigen Code in Ihr Javascript ein. Stellen Sie sicher, dass jedes Bild, bei dem Sie die Funktion nutzen möchten, die Methode imageLoadError in seinem onerror-Attribut aufruft. So wird automatisch das Fallback-Bild angezeigt, wenn ein Ladefehler auftritt.

Vorteile der Verwendung von Fallback-Bildern

Der Einsatz von Fallback-Bildern verbessert die Benutzererfahrung erheblich. Besucher Ihrer Website werden nicht mit leeren Bildplätzen konfrontiert, was zu einem professionelleren Gesamtbild Ihrer Webseite führt. Zudem kann dies die Absprungrate reduzieren und die Benutzerbindung erhöhen.

Fazit

Die Implementierung einer einfachen Fehlerbehandlungsroutine für Bilder ist eine hervorragende Möglichkeit, die Benutzererfahrung auf Ihrer Website zu optimieren. Durch die Verwendung von Fallback-Bildern stellen Sie sicher, dass Ihre Besucher immer ansprechende Inhalte sehen, auch wenn einige Bilder nicht geladen werden können.

Rikka Altland/CNN Underscored