Bildladefehler-Funktion für Fallbackbilder in JavaScript

Wenn ein Bild nicht geladen werden kann, ist es wichtig, eine alternative Lösung anzubieten, um die Nutzererfahrung nicht zu beeinträchtigen. In diesem Artikel erfahren Sie, wie Sie eine Fallback-Strategie für Bilder umsetzen können, um sicherzustellen, dass Ihre Webseite stets ansprechend bleibt.

Was ist eine Fallback-Strategie für Bilder?

Eine Fallback-Strategie für Bilder bedeutet, dass Sie ein Ersatzbild bereitstellen, falls das ursprüngliche Bild nicht geladen werden kann. Dies verbessert die Benutzererfahrung und hält Ihre Webseite visuell ansprechend. Besonders wichtig ist dies in einem Medienumfeld, wo visuelle Inhalte oft im Mittelpunkt stehen.

Implementierung einer Fallback-Lösung

Um eine Fallback-Lösung zu implementieren, können Sie eine einfache JavaScript-Funktion nutzen, die ein Ersatzbild lädt, wenn das ursprüngliche Bild nicht verfügbar ist. Das folgende Beispiel zeigt, wie dies umgesetzt werden 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

In dieser Funktion wird zunächst ein Fallback-Bild definiert. Wenn das ursprüngliche Bild nicht geladen werden kann, wird das 'onerror'-Attribut entfernt, und die Quelle des Bildes wird auf das Fallback-Bild gesetzt. Zusätzlich wird überprüft, ob es vorhergehende 'SOURCE'-Elemente gibt, die ebenfalls aktualisiert werden müssen.

Fazit

Durch die Implementierung einer Fallback-Strategie für Bilder stellen Sie sicher, dass Ihre Webseite auch bei technischen Problemen gut aussieht. Mit einer einfachen JavaScript-Funktion können Sie die Nutzererfahrung erheblich verbessern und ein professionelles Erscheinungsbild Ihrer Webseite gewährleisten.

Der oben genannte Code ist ein einfaches, aber effektives Mittel, um sicherzustellen, dass Ihre Besucher immer etwas Ansprechendes zu sehen bekommen, selbst wenn bestimmte Bilder fehlen.