在javascript中检测图像404

Question

在javascript中检测图像404

Tob*_*tke 53 javascript jquery cross-browser dom-events

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

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

Answer 1

SLa*_*aks 53

处理<img>元素的onerror事件.

@xal:确保在你设置`src`属性之前挂钩`error`事件*(如果你用`new Image`或`document.createElement("img")`而不是通过HTML字符串).否则,您处于竞争状态,并且在开始处理之前事件可能会触发(就像`load`事件一样). (9认同)
Javascript在Javascript线程上运行,在某些浏览器*上也是UI线程.它不一定是下载线程.我帮助人们修复了由此引起的错误,在设置`load`处理程序之前设置`src`.那里有竞争条件.如果您已经注册了处理程序,那么一旦JS线程可用于执行其他操作,事件处理代码将把它放在执行堆栈上以便运行.如果你不这样做,你可以错过这个活动. (9认同)
我想对此发表评论，尽管此时它已过时，只是因为它是一个非常受欢迎的问答。如果`<img>`返回`404`，但响应中包含图像（例如，占位符图像），则将不触发error事件。 (4认同)

Answer 2

Dor*_*oto 19

第一种选择:

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

Run Code Online (Sandbox Code Playgroud)

第二种选择:

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

Run Code Online (Sandbox Code Playgroud)

Fidler中的示例

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

Answer 3

uno*_*omi 10

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

Run Code Online (Sandbox Code Playgroud)

在这里如何使用它:

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

Run Code Online (Sandbox Code Playgroud)

链接死了.应修改此答案以包含内容或将其绿色标记删除. (6认同)
如果请求返回 HTTP 404 和后备图像，则此方法不起作用 (2认同)

Answer 4

小智 9

只需在错误事件上绑定attr触发器.

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，4 月前
查看次数：	48537 次
最近记录：	6 年，1 月前