Neuigkeiten zum Streit zwischen Trump und Musk

Fehler beim Laden von Bildern gehören zu den häufigsten Problemen im Web. Um diese Herausforderung zu meistern, können wir eine JavaScript-Funktion implementieren, die sicherstellt, dass stets ein Ersatzbild angezeigt wird, wenn das Originalbild nicht geladen werden kann.

Die Funktionsweise der Bildfehlerbehandlung

Im folgenden Beispiel nutzen wir eine Funktion namens imageLoadError, die ausgeführt wird, wenn ein Bild nicht erfolgreich geladen werden kann. Diese Funktion setzt das Bild auf ein vordefiniertes Fallback-Bild.

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

Implementierung der Funktion

Um sicherzustellen, dass jedes Bild einen reibungslosen Übergang zum Fallback-Bild hat, entfernen wir zunächst das Attribut onerror. Anschließend wird die Quelle des Bildes auf das Fallback-Bild geändert. Die Funktion durchläuft auch alle vorhergehenden SOURCE-Elemente, um sicherzustellen, dass auch diese auf das Ersatzbild aktualisiert werden.

Live-Updates und Bildanzeigen

Diese Methode eignet sich hervorragend für Webseiten, die regelmäßig aktualisierte Bilder verwenden, da sie besucht werden, um sicherzustellen, dass Nutzer eine konsistente visuelle Erfahrung haben, auch wenn ein Bildfehler auftritt.

Brandon Bell/Getty Images