Die Handhabung von Bildfehlern kann entscheidend für die Benutzererfahrung auf einer Website sein. Ein effektives Skript zur Fehlerbehebung kann sicherstellen, dass Besucher immer ansprechende visuelle Inhalte sehen, auch wenn das ursprüngliche Bild nicht geladen werden kann.

Fallback-Bilder nutzen

Im Falle eines Ladefehlers für ein Bild kann es hilfreich sein, ein Fallback-Bild anzugeben. Hier ist ein Beispiel für eine Funktion, die genau dies tut:

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 die Funktion

Diese Funktion überprüfen, ob ein Bild nicht geladen werden kann und in diesem Fall ein alternatives Bild anzeigt. Zuerst wird das Attribut ‚onerror‘ entfernt, damit die Funktion bei weiteren Ladefehlern nicht erneut ausgeführt wird. Anschließend wird die Quelle des Bildes auf das Fallback-Bild gesetzt.

Vorbereitung der Bildressourcen

Um sicherzustellen, dass die Funktion effektiv arbeitet, sollte das Fallback-Bild in den Medienressourcen der Website vorhanden sein. Das gewählte Fallback-Bild sollte qualitativ hochwertig sein, um die Benutzererfahrung nicht zu beeinträchtigen.

Zusätzliche Überlegungen

Es ist auch wichtig, die Struktur der HTML-Dokumente zu berücksichtigen. In diesem spezifischen Beispiel wird auch sichergestellt, dass, wenn es mehrere Quelle-Elemente gibt, diese ebenfalls auf das Fallback-Bild aktualisiert werden.

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

Eine gut durchdachte Strategie zur Bildverwendung trägt wesentlich zur Optimierung der Benutzererfahrung und der Webseiten Leistung bei.

Brian Snyder/Reuters

Neues Design, maximale Performance: Wie gefällt Ihnen unsere neue Website?

Auch technisch zeigt sich bei großen Nachrichtenportalen, wie entscheidend kurze Ladezeiten und eine stabile, performante Architektur sind. Die Umstellung unseres Magazins wurde durch Daniel Wom und VeloCore mit klarem Fokus auf Geschwindigkeit, Core Web Vitals und langfristige Performance realisiert.