在javascript中检测图像404

After a user uploads a file we have to do some additional processing with the images such as resizing and upload to S3. This can take up to 10 extra seconds. Obviously we do this in a background. However, we want to show the user the result page immediately and simply show spinners in place until the images arrive in their permanent home on s3.

用户上传文件后，我们必须对图像进行一些额外的处理，例如调整大小并上传到S3。这可能需要多达10秒钟。显然我们是在后台完成的。但是，我们希望立即向用户显示结果页面，并简单地显示微调器，直到图像到达s3的永久家中。

I'm looking for a way to detect that a certain image failed to load correctly (404) in a cross browser way. If that happens, we want to use JS to show a spinner in it's place and reload the image every few seconds until it can be successfully loaded from s3.

我正在寻找一种方法来检测某个图像无法以交叉浏览器的方式正确加载（404）。如果发生这种情况，我们希望使用JS在其位置显示一个微调器并每隔几秒重新加载一次图像，直到它可以从s3成功加载。

5 个解决方案

#1

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

来自：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;
}

And here how to use it:

在这里如何使用它：

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

#2

Handle the <img> element's onerror event.

处理在javascript中检测图像404 元素的onerror事件。

#3

just bind the attr trigger on the error event.

只需绑定错误事件的attr触发器。

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

#4

First option:

第一种选择：

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

Second 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>

Example in Fidler

Fidler中的示例

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

#5

This worked for me (mine is in coffeescript). You'll need to replace with a spinner instead, of course.

这对我有用（我的是coffeescript）。当然，你需要用旋转器代替。

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

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

I'm guessing the javascript equivalent is something like

我猜javascript等价物是这样的

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

$(document).on("page:load", checkImages);

$（document）.on（“page：load”，checkImages）;

#1