jQuery / JavaScript zum Ersetzen fehlerhafter Bilder

546

Ich habe eine Webseite, die eine Reihe von Bildern enthält. Manchmal ist das Bild nicht verfügbar, sodass ein fehlerhaftes Bild im Browser des Clients angezeigt wird.

Wie verwende ich jQuery, um den Satz von Bildern abzurufen, ihn nach fehlerhaften Bildern zu filtern und dann den src zu ersetzen?


- Ich dachte, es wäre einfacher, dies mit jQuery zu tun, aber es stellte sich als viel einfacher heraus, nur eine reine JavaScript-Lösung zu verwenden, dh die von Prestaul bereitgestellte.

Dan Lord
quelle

Antworten:

760

Behandeln Sie das onErrorEreignis, damit das Bild seine Quelle mithilfe von JavaScript neu zuweist:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}
<img src="image.png" onerror="imgError(this);"/>

Oder ohne JavaScript-Funktion:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

In der folgenden Kompatibilitätstabelle sind die Browser aufgeführt, die die Fehlerfunktion unterstützen:

http://www.quirksmode.org/dom/events/error.html

Prestaul
quelle
132
Sie möchten wahrscheinlich einen Fehler löschen, bevor Sie src einstellen. Andernfalls kann es zu einem "Stapelüberlauf" kommen, wenn noimage.gif ebenfalls fehlt.
pcorcoran
45
Ich dachte und hoffte, wir würden uns von Inline-Attributen für Javascript-Ereignisse
entfernen
24
redsquare ... sie sind vollkommen verständlich, wenn Sie überlegt sind, sie unter Kontrolle zu halten, und können sogar nützlich sein, wenn Sie möchten, dass Ihr Markup widerspiegelt, was tatsächlich passieren wird.
Nicole
2
Guter Punkt NickC, über das Markup, das zeigt, was passiert, ich erschrecke nur, wenn ich es mir ansehe: P
SSH Dies
38
@redsquare, ich stimme vollkommen zu, aber dies ist ein einzigartiger Fall. Inline ist der einzige Ort, an dem Sie den Listener mit absoluter Sicherheit anhängen können, dass das Ereignis nicht ausgelöst wird, bevor Ihr Listener angehängt wird. Wenn Sie dies am Ende des Dokuments tun oder auf das Laden des DOM warten, verpassen Sie möglicherweise das Fehlerereignis bei einigen Bildern. Es nützt Ihnen nichts, einen Fehlerbehandler anzuhängen, nachdem das Ereignis ausgelöst wurde.
Prestaul
201

Ich benutze den eingebauten errorHandler:

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

Bearbeiten: Die error()Methode ist in Abfrage 1.8 und höher veraltet . Verwenden Sie .on("error")stattdessen Folgendes:

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});
Travis
quelle
112
Wenn Sie diese Technik verwenden, können Sie die "one" -Methode verwenden, um zu vermeiden, dass das Ereignis aufgehoben werden muss: $ ('img'). One ('error', function () {this.src = 'gebrochen.gif';}) ;;
Prestaul
7
+1 Aber musst du es lösen? Es funktioniert wunderbar bei dynamischen Bildern (z. B. solchen, die sich beim Schweben ändern können), wenn Sie es nicht lösen.
Aximili
15
Ich denke, wenn Sie es nicht aufheben und die gebrochene srif-Referenz aus irgendeinem Grund nicht geladen werden kann, können im Browser schlimme Dinge passieren.
Travis
4
@travis, an welchem ​​Punkt würden Sie diesen Anruf tätigen? Gibt es eine Möglichkeit, diese Methode zu verwenden und sicherzustellen, dass Ihr Handler angehängt wird, bevor das Fehlerereignis ausgelöst wird?
Prestaul
5
Hier ist ein Beispiel für einen Fall, in dem der Fehler ausgelöst wird, bevor der Ereignishandler angehängt wird: jsfiddle.net/zmpGz/1 Ich bin wirklich neugierig, ob es einen ausfallsicheren Weg gibt, diesen Handler anzuhängen ...
Prestaul
120

Falls jemand wie ich versucht, das errorEreignis an ein dynamisches HTML- imgTag anzuhängen , möchte ich darauf hinweisen, dass es einen Haken gibt:

Anscheinend sprudelnimg Fehlerereignisse in den meisten Browsern nicht, was im Standard angegeben ist .

So etwas wie das Folgende wird nicht funktionieren :

$(document).on('error', 'img', function () { ... })

Hoffe, dass dies jemand anderem hilfreich sein wird. Ich wünschte, ich hätte das hier in diesem Thread gesehen. Aber ich habe es nicht getan. Also füge ich es hinzu

Mouad
quelle
hat nicht funktioniert. Ich lade ein totes Bild dynamisch und hänge es an den Dom an, und es wird kein 'Fehler'-Ereignis ausgelöst.
vsync
59

Hier ist eine eigenständige Lösung:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});
Devon
quelle
5
Fast korrekt ... ein korrektes Bild im IE wird weiterhin zurückgegeben (typeof (this.naturalWidth) == "undefined") == true; - Ich habe die if-Anweisung in (! This.complete || (! $. Browser.msie && (Typ dieser.naturalWidth == "undefined" || this.naturalWidth == 0))
geändert.
3
Dies gilt, da nach dem Laden einer Seite ein fehlerhaftes Bild erkannt werden kann. Ich brauchte das.
Nordamerikaner
@Sugendran $.browserist veraltet und wurde jetzt entfernt. Verwenden Sie stattdessen die Feature-Erkennung (wird in diesem Fall komplizierter).
Lee Penkman
3
Standalone, benötigt aber jQuery?
Charlie
Dies funktioniert gut, aber wenn der Quellcode des Bildes a zurückgibt, ist das Bild fehlerhaft 204 No Content.
Carson Reinke
35

Ich glaube, das ist es, wonach Sie suchen : jQuery.Preload

Hier ist der Beispielcode aus der Demo. Sie geben das Laden und die nicht gefundenen Bilder an und schon sind Sie fertig:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});
Nick Craver
quelle
1
jQuery.Preload ist ein Plugin, das zur Verwendung des Beispielcodes erforderlich ist.
Dan Lord
17
Ja ... dies ist in der Antwort in der ersten Zeile verlinkt.
Nick Craver
Vielen Dank, Nick. Dies scheint eine gute Lösung für das über 8-jährige Problem von Firefox zu sein, bei dem kein Bildersatz für fehlerhafte Bilder angezeigt wird. Außerdem können Sie das kleine Ding brandmarken ... nochmals vielen Dank.
Klewis
25
$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

Quelle: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Mohamad
quelle
1
Problem behoben, bei dem ein Fehler nicht auf Firefox ausgelöst wurde :) Danke.
Widder
19

Während das OP versuchte, das SRC zu ersetzen, möchten sicher viele Leute, die diese Frage beantworten, nur das kaputte Bild verbergen. In diesem Fall hat diese einfache Lösung für mich großartig funktioniert.

Verwenden von Inline-JavaScript:

<img src="img.jpg" onerror="this.style.display='none';" />

Verwenden von externem JavaScript:

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}
<img src='img.jpg' />

Verwenden von modernem externem JavaScript:

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});
<img src='img.jpg' />

Siehe Browser - Unterstützung für NoteList.forEach und Pfeil - Funktionen .

Nathan Arthur
quelle
1
Ich habe festgestellt, dass dies für mich die zuverlässigste Lösung für ein sehr ähnliches Problem ist. Ich möchte nur lieber kein Bild zeigen als eine kaputte Bildalternative. Vielen Dank.
PC_
Dies funktioniert offensichtlich nicht, wenn die Inhaltssicherheitsrichtlinie Inline-Skripte nicht zulässt.
Isherwood
@isherwood Guter Punkt. Ich habe eine Lösung hinzugefügt, die über eine externe JS-Datei funktioniert.
Nathan Arthur
11

Hier ist eine schnelle und schmutzige Möglichkeit, alle fehlerhaften Bilder zu ersetzen, und es ist nicht erforderlich, den HTML-Code zu ändern;)

Codepen Beispiel

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });
Ashfaq Ahmed
quelle
9

Ich konnte kein Skript finden, das meinen Anforderungen entspricht, daher habe ich eine rekursive Funktion erstellt, um nach fehlerhaften Bildern zu suchen und sie alle vier Sekunden neu zu laden, bis sie behoben sind.

Ich habe es auf 10 Versuche beschränkt, als ob es bis dahin nicht geladen wäre. Das Image ist möglicherweise nicht auf dem Server vorhanden und die Funktion würde in eine Endlosschleife eintreten. Ich teste immer noch. Fühlen Sie sich frei, es zu optimieren :)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});
Schatten
quelle
Gute Idee beim Versuch, Bilder neu zu laden. Dies ist nützlich für Bilder, die hochgeladen / automatisch generiert werden und der Server beim Laden der Seite möglicherweise nicht abgeschlossen wurde. Das ist eine originelle Formatierung. Ein bisschen zu inkonsistent und nicht nach meinem Geschmack ...
Joakim
8

Dies ist eine beschissene Technik, aber sie ist ziemlich garantiert:

<img ...  onerror="this.parentNode.removeChild(this);">
Phil LaNasa
quelle
6

Sie können dafür GitHubs eigenen Abruf verwenden:

Frontend: https://github.com/github/fetch
oder für Backend eine Node.js-Version: https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

Bearbeiten: Diese Methode wird XHR ersetzen und war angeblich bereits in Chrome. Für jeden, der dies in Zukunft liest, ist die oben genannte Bibliothek möglicherweise nicht enthalten.

BarryMode
quelle
6

Dies ist JavaScript, sollte browserübergreifend kompatibel sein und ohne das hässliche Markup geliefert werden onerror="":

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

CODEPEN:

Axel
quelle
upvote forwhile (i--)
s3c
4

Besser anrufen mit

jQuery(window).load(function(){
    $.imgReload();
});

Da die Verwendung document.readynicht unbedingt bedeutet, dass Bilder geladen werden, wird nur der HTML-Code geladen. Somit besteht keine Notwendigkeit für einen verzögerten Anruf.

Schatten
quelle
4

CoffeeScript- Variante:

Ich habe es geschafft, ein Problem mit Turbolinks zu beheben, das dazu führt, dass die .error () -Methode manchmal in Firefox ausgelöst wird, obwohl das Bild wirklich vorhanden ist.

$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)
Kevin
quelle
4

Mit der Antwort von Prestaul habe ich einige Überprüfungen hinzugefügt und bevorzuge die jQuery-Methode.

<img src="image1.png" onerror="imgError(this,1);"/>
<img src="image2.png" onerror="imgError(this,2);"/>

function imgError(image, type) {
    if (typeof jQuery !== 'undefined') {
       var imgWidth=$(image).attr("width");
       var imgHeight=$(image).attr("height");

        // Type 1 puts a placeholder image
        // Type 2 hides img tag
        if (type == 1) {
            if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') {
                $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/");
            } else {
               $(image).attr("src", "http://lorempixel.com/200/200/");
            }
        } else if (type == 2) {
            $(image).hide();
        }
    }
    return true;
}
trante
quelle
4

Wenn Sie Ihr imgmit eingefügt haben , z. B. innerHTML: $("div").innerHTML = <img src="wrong-uri">, Können Sie ein anderes Bild laden, wenn dies fehlschlägt. Beispiel:

<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">

Warum wird javascript: _benötigt? Da Skripte, die über Skript-Tags in das DOM eingefügt innerHTMLwerden, zum Zeitpunkt der Einfügung nicht ausgeführt werden, müssen Sie explizit sein.

horro
quelle
4

Ich habe diesen Beitrag gefunden, als ich mir diesen anderen SO-Beitrag angesehen habe . Unten ist eine Kopie der Antwort, die ich dort gegeben habe.

Ich weiß, dass dies ein alter Thread ist, aber React ist populär geworden, und vielleicht kommt jemand, der React verwendet, hierher, um nach einer Antwort auf dasselbe Problem zu suchen.

Wenn Sie also React verwenden, können Sie Folgendes tun: Dies war eine Antwort, die ursprünglich von Ben Alpert vom React-Team hier bereitgestellt wurde

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}
Jordan Bonitatis
quelle
4

Ich habe eine Geige erstellt , um das kaputte Bild durch das Ereignis "onerror" zu ersetzen. Dies kann Ihnen helfen.

    //the placeholder image url
    var defaultUrl = "url('https://sadasd/image02.png')";

    $('div').each(function(index, item) {
      var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
      $('<img>', {
        src: currentUrl
      }).on("error", function(e) {
        $this = $(this);
        $this.css({
          "background-image": defaultUrl
        })
        e.target.remove()
      }.bind(this))
    })
Ninjaneer
quelle
4

Hier ist ein Beispiel für die Verwendung des von JQuery umschlossenen HTML5-Image-Objekts. Rufen Sie die Ladefunktion für die primäre Image-URL auf. Wenn dieses Laden einen Fehler verursacht, ersetzen Sie das src-Attribut des Images durch eine Sicherungs-URL.

function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
    var $img = $('#' + imgId);
    $(new Image()).load().error(function() {
        $img.attr('src', backupUrl);
    }).attr('src', primaryUrl)
}

<img id="myImage" src="primary-image-url"/>
<script>
    loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>
Kurt Hartmann
quelle
4

Pure JS. Meine Aufgabe war: Wenn das Bild 'bl-Once.png' leer ist -> fügen Sie das erste Bild (das keinen 404-Status hat) aus der Array-Liste ein (im aktuellen Verzeichnis):

<img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)">

Vielleicht muss es verbessert werden, aber:

var srcToInsertArr = ['empty1.png', 'empty2.png', 'needed.png', 'notActual.png']; // try to insert one by one img from this array
    var path;
    var imgNotFounded = true; // to mark when success

    var replaceEmptyImage = {
        insertImg: function (elem) {

            if (srcToInsertArr.length == 0) { // if there are no more src to try return
                return "no-image.png";
            }
            if(!/undefined/.test(elem.src)) { // remember path
                path = elem.src.split("/").slice(0, -1).join("/"); // "http://localhost:63342/GetImage"
            }
            var url = path + "/" + srcToInsertArr[0];

            srcToInsertArr.splice(0, 1); // tried 1 src

            
                if(imgNotFounded){ // while not success
                    replaceEmptyImage.getImg(url, path, elem); // CALL GET IMAGE
                }
            

        },
        getImg: function (src, path, elem) { // GET IMAGE

            if (src && path && elem) { // src = "http://localhost:63342/GetImage/needed.png"
                
                var pathArr = src.split("/"); // ["http:", "", "localhost:63342", "GetImage", "needed.png"]
                var name = pathArr[pathArr.length - 1]; // "needed.png"

                xhr = new XMLHttpRequest();
                xhr.open('GET', src, true);
                xhr.send();

                xhr.onreadystatechange = function () {

                    if (xhr.status == 200) {
                        elem.src = src; // insert correct src
                        imgNotFounded = false; // mark success
                    }
                    else {
                        console.log(name + " doesn't exist!");
                        elem.onerror();
                    }

                }
            }
        }

    };

Es wird also die korrekte 'required.png' aus dem aktuellen Verzeichnis in meine src oder 'no-image.png' einfügen.

Дмитрий Дорогонов
quelle
Ich habe auf der gleichen Seite verwendet. Das ist nur eine Idee. Mein echter Code wurde verbessert ...
Дмитрий Дорогонов
3

Ich bin mir nicht sicher, ob es einen besseren Weg gibt, aber ich kann mir einen Hack vorstellen, um ihn zu bekommen - Sie könnten Ajax auf die img-URL posten und die Antwort analysieren, um zu sehen, ob das Bild tatsächlich zurückgekommen ist. Wenn es als 404 oder so zurückkam, tauschen Sie das Bild aus. Obwohl ich davon ausgehe, dass dies ziemlich langsam sein wird.

Chii
quelle
3

Ich habe mein Problem mit diesen zwei einfachen Funktionen gelöst:

function imgExists(imgPath) {
    var http = jQuery.ajax({
                   type:"HEAD",
                   url: imgPath,
                   async: false
               });
    return http.status != 404;
}

function handleImageError() {
    var imgPath;

    $('img').each(function() {
        imgPath = $(this).attr('src');
        if (!imgExists(imgPath)) {
            $(this).attr('src', 'images/noimage.jpg');
        }
    });
}
Luis Gustavo Beligante
quelle
3

jQuery 1.8

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

jQuery 3

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .on("error", function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

Referenz

Nabi KAZ
quelle
3

Ich denke, ich habe eine elegantere Möglichkeit, Ereignisse zu delegieren und Ereignisse zu erfassen window, errorselbst wenn das Backup-Image nicht geladen werden kann.

img {
  width: 100px;
  height: 100px;
}
<script>
  window.addEventListener('error', windowErrorCb, {
    capture: true
  }, true)

  function windowErrorCb(event) {
    let target = event.target
    let isImg = target.tagName.toLowerCase() === 'img'
    if (isImg) {
      imgErrorCb()
      return
    }

    function imgErrorCb() {
      let isImgErrorHandled = target.hasAttribute('data-src-error')
      if (!isImgErrorHandled) {
        target.setAttribute('data-src-error', 'handled')
        target.src = 'backup.png'
      } else {
        //anything you want to do
        console.log(target.alt, 'both origin and backup image fail to load!');
      }
    }
  }
</script>
<img id="img" src="error1.png" alt="error1">
<img id="img" src="error2.png" alt="error2">
<img id="img" src="https://i.stack.imgur.com/ZXCE2.jpg" alt="avatar">

Der Punkt ist :

  1. Fügen Sie den Code in das ein headund führen Sie es als erstes Inline-Skript aus. Es werden also die Fehler abgehört, die nach dem Skript auftreten.

  2. Verwenden Sie die Ereigniserfassung, um die Fehler abzufangen, insbesondere bei Ereignissen, die nicht sprudeln.

  3. Verwenden Sie die Ereignisdelegierung, um zu vermeiden, dass Ereignisse für jedes Bild gebunden werden.

  4. Geben Sie dem Fehlerelement imgein Attribut, nachdem Sie ihm ein Attribut gegeben haben backup.png, um das Verschwinden der backup.pngund der nachfolgenden Endlosschleife wie folgt zu vermeiden :

img error-> backup.png-> error-> backup.png-> error -> ,,,,,

Xianshenglu
quelle
Dies ist bei weitem die beste Antwort. Ich würde nur empfehlen, es zu verwenden, let isImgErrorHandled = target.src === 'backup.png';da es ein wenig vereinfacht.
Sabo
@ Sabo, es gibt ein kleines Problem, da der src-Pfad möglicherweise nicht dem von mir zugewiesenen Pfad entspricht. Zum Beispiel, target.src='backup.png'aber das nächste Mal console.log(target.src)kann nicht seinbackup.png
xianshenglu
2
;(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
    return this.one('error', function () {
        var self = this;
        this.src = (fallback || 'http://lorempixel.com/$width/$height')
        .replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; });
    });
};

Sie können einen Platzhalterpfad übergeben und darin auf alle Eigenschaften des fehlgeschlagenen Bildobjekts zugreifen über $*:

$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');

http://jsfiddle.net/ARTsinn/Cu4Zn/

yckart
quelle
2

Das hat mich seit Jahren frustriert. Mein CSS-Fix legt ein Hintergrundbild auf dem img. Wenn ein dynamisches Bild srcnicht in den Vordergrund geladen wird, ist ein Platzhalter auf dem imgHintergrund des Bildschirms sichtbar . Dies funktioniert , wenn Sie Ihre Bilder mit einer Standardgröße (zB height, min-height, widthund / oder min-width).

Sie sehen das Symbol für defekte Bilder, aber es ist eine Verbesserung. Bis auf IE9 erfolgreich getestet. iOS Safari und Chrome zeigen nicht einmal ein defektes Symbol.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

Fügen Sie eine kleine Animation hinzu, um srcZeit zum Laden ohne Hintergrundflimmern zu haben. Chrome wird im Hintergrund reibungslos ausgeblendet, Desktop Safari jedoch nicht.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  -webkit-animation: fadein 1s;
  animation: fadein 1s;                     
}

@-webkit-keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
Dylan Valade
quelle
2

Wenn das Bild nicht geladen werden kann (z. B. weil es nicht unter der angegebenen URL vorhanden ist), wird die Bild-URL in die Standard-URL geändert.

Weitere Informationen zu .error ()

$('img').on('error', function (e) {
  $(this).attr('src', 'broken.png');
});

Kasper
quelle
1

Ich habe das gleiche Problem. Dieser Code funktioniert gut in meinem Fall.

// Replace broken images by a default img
$('img').each(function(){
    if($(this).attr('src') === ''){
      this.src = '/default_feature_image.png';
    }
});
Dale Nguyen
quelle
1

Manchmal ist die Verwendung des errorEreignisses nicht möglich, z. B. weil Sie versuchen, etwas auf einer bereits geladenen Seite auszuführen, z. B. wenn Sie Code über die Konsole, ein Lesezeichen oder ein asynchron geladenes Skript ausführen. In diesem Fall scheint es den Trick zu tun , dies zu überprüfen img.naturalWidthund img.naturalHeight0 zu sein.

Hier ist beispielsweise ein Ausschnitt zum erneuten Laden aller fehlerhaften Bilder von der Konsole:

$$("img").forEach(img => {
  if (!img.naturalWidth && !img.naturalHeight) {
    img.src = img.src;
  }
}
Lea Verou
quelle
0

Ich fand, dass dies am besten funktioniert. Wenn ein Bild beim ersten Laden nicht geladen werden kann, wird es vollständig aus dem DOM entfernt. Durch Ausführen wird console.clear()das Konsolenfenster sauber gehalten, da die 404-Fehler bei Try / Catch-Blöcken nicht ausgelassen werden können.

$('img').one('error', function(err) {
    // console.log(JSON.stringify(err, null, 4))
    $(this).remove()
    console.clear()
})
decoder7283
quelle