Erkennen eines Bildes 404 in Javascript

Nachdem ein Benutzer eine Datei hochlädt, haben wir einige zusätzliche Bearbeitung mit den Bilder, wie das ändern der Größe und laden zum S3. Dies kann bis zu 10 zusätzliche Sekunden. Natürlich tun wir dies im hintergrund. Jedoch wollen wir zeigen dem user die Ergebnis-Seite sofort und einfach zeigen, Spinner, bis die Bilder kommen in Ihr festes Zuhause auf s3.

Ich bin auf der Suche nach einem Weg, um zu erkennen, dass ein bestimmtes Bild konnte nicht korrekt geladen werden (404) in einem cross-browser Weg. Wenn das passiert, wollen wir mit JS zu zeigen, ein spinner in ihm Platz, und laden Sie das Bild alle paar Sekunden bis es erfolgreich geladen von s3.

InformationsquelleAutor der Frage Tobias Lütke | 2010-06-10

  1. 8

    Aus: http://lucassmith.name/2008/11/is-my-image-loaded.html

    //First a couple helper functions
function $(id) {
    return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o,t) {    return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;}

//Here's the meat and potatoes
function image(src,cfg) {    var img, prop, target;
    cfg = cfg || (isType(src,'o') ? src : {});

    img = $(src);
    if (img) {
        src = cfg.src || img.src;
    } else {
        img = document.createElement('img');
        src = src || cfg.src;
    }

    if (!src) {
        return null;
    }

    prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
    img.alt = cfg.alt || img.alt;

    //Add the image and insert if requested (must be on DOM to load or
    //pull from cache)
    img.src = src;

    target = $(cfg.target);
    if (target) {
        target.insertBefore(img, $(cfg.insertBefore) || null);
    }

    //Loaded?
    if (img.complete) {
        if (img[prop]) {
            if (isType(cfg.success,'f')) {
                cfg.success.call(img);
            }
        } else {
            if (isType(cfg.failure,'f')) {
                cfg.failure.call(img);
            }
        }
    } else {
        if (isType(cfg.success,'f')) {
            img.onload = cfg.success;
        }
        if (isType(cfg.failure,'f')) {
            img.onerror = cfg.failure;
        }
    }

    return img;
}

    Und hier, wie es zu benutzen:

    image('imgId',{
    success : function () { alert(this.width); },
    failure : function () { alert('Damn your eyes!'); },
});

image('http://somedomain.com/image/typooed_url.jpg', {
    success : function () {...},
    failure : function () {...},
    target : 'myContainerId',
    insertBefore : 'someChildOfmyContainerId'
});

    InformationsquelleAutor der Antwort unomi

  2. 50

    Griff die <img> element onerror Veranstaltung.

    InformationsquelleAutor der Antwort SLaks

  3. 9

    nur binden Sie die attr-trigger für das error-Ereignis.

    $(myimgvar).bind('error',function(ev){
    //error has been thrown
    $(this).attr('src','/path/to/no-artwork-available.jpg');
}).attr('src',urlvar);

    InformationsquelleAutor der Antwort oasisfleeting

  4. 8

    Erste option:

    <img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>

    Zweite option:

    <html>
<head>
<script type="text/javascript">
    function ImgError(source){
        source.src = "/noimage.gif";
        source.onerror = "";
        return true;
    }
</script>
</head>
<body>
    <img src="image_example1.jpg" onerror="ImgError(this)" />
</body>
</html>

    Beispiel in Fidler

    https://jsfiddle.net/dorathoto/8z4Ltzp8/

    InformationsquelleAutor der Antwort Dorathoto

  5. 0

    Dieser arbeitete für mich (meine ist in coffeescript). Sie müssen Sie zu ersetzen mit einem spinner statt, natürlich.

    checkImages = ->
  $("img").each ->
    $(this).error ->
      $(this).attr("src", "../default/image.jpg")

$(document).on('page:load', checkImages)

    Ich vermute, dass die javascript-Entsprechung ist so etwas wie

    function checkImages() {
  $("img").each(function() {
    $(this).error(function() {
      $(this).attr("src", "../default/image.jpg");
    });
  });
};

    $(document).auf("Seite:load" checkImages);

    InformationsquelleAutor der Antwort dav1dhunt

Schreibe einen Kommentar