为什么 Chrome 的 img 元素的 onerror 事件只触发一次？

Question

为什么其他浏览器（IE7、8、9、FF、Opera、Safari）都重复调用img元素的onerror事件，Chrome只调用一次？

有没有办法强制它再次重复 onerror 调用（在 Chrome 中）？

jsfiddle

HTML：

<div id="thisWorks">
    this works in Chrome. onerror event is called once.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);" 
        rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>

<div id="thisDoesNotWork">
    this does not work in Chrome. onerror event is not called twice.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);"
        rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>

JAVASCRIPT：

function fixit(img)
{
    var arrPhotos = img.getAttribute('rsrc').split('|');

    // change the img src to the next available
    img.setAttribute('src', arrPhotos.shift());

    // now put back the image list (with one less) into the rsrc attr
    img.setAttribute('rsrc', arrPhotos.join('|'));

    return true;    
}

编辑： 根据@Sunil D.关于在initial fiddle 示例中由于www.asdfjklasdfasdf.com 的无效域名而导致Chrome 未发出新查找的评论，我继续更改域名以匹配成功图像的域名，但使用了不同的文件名，所以它仍然是 404。这将证明它不是导致 Chrome 在第二次尝试时退出的无效域名。

编辑： 更新了 fiddle 并删除了 jquery 的使用，以简化事情并将其排除在外。

Answer 1

正如 Etdashou 在这个问题上的回答：https://stackoverflow.com/a/9891041/1090274，设置 this.onerror=null; 对我有用。

Answer 2

好的，知道了。在分配给 onerror 事件的函数中，将src 属性设置为null，然后再将其更改为新值。

img.setAttribute('src', null);

working fiddle

这会以某种方式导致 Chrome 重置它，并且如果 src 的后续值返回错误，它将强制它重复调用 onerror。

注意：空字符串无效，必须为 null。
注意 2： 此修复程序使用纯 javascript 工作（但不适用于 jquery .attr 方法）。发布此解决方案后，我尝试使用 jquery .attr 方法将其设置为 $img.attr('src', null);，但它并没有那样工作，当我将其更改为 javascript 时，它工作了。我还尝试使用 jquery .prop 方法，而不是像 $img.prop('src', null); 这样第一次工作，但在随后的几次刷新中失败。只有纯 javascript 似乎是万无一失的解决方案。

更新：
好的，事实证明，虽然上述更改修复了 Chrome 并导致它像所有其他浏览器（FF、Safari、Opera、IE7-9）一样重复调用 onerror，但它会导致 IE10 的 onerror 事件出现问题，从而忽略任何有效图像在上一行将其设置为=null 后分配给src。 （……叹气）。

Answer 3

我试过上面提到的方法，setAttribute('src', null)有一个副作用，即添加另一个请求。

最后，我使用

    setTimeout(function(){ imgElement.src = 'http://xxxx'; }, 0)

，这行得通！

以jsfiddle 为例。

Answer 4

我认为@Mikhail 是在正确的轨道上，除了一个稍微不同的原因。在第二个示例中，您尝试从同一个不存在的域 www.asdfjklasdfasdf.com 下载 2 张图像。

尝试下载 bogus1.png 时，Chrome 无法将域解析为 IP 地址。

当尝试下载bogus2.png（从同一个不存在的域）时，Chrome 根本不做任何事情……因为它知道域查找失败。 chrome 不发送另一个 onerror 事件是否是正确的行为可能还有待商榷 :) 我有点期待它应该这样做。

为了证明这一点，只需在bogus2.png 的域名中添加 1 个字符，它就会按您的预期工作。

编辑

您可以强制它尝试后续下载的一种方法是将<img> 的src 更改为空字符串。这有点hacky，但它有效。您可以将 rsrc 属性设置为：

rsrc="''|http://www.asdfjklasdfasdf.com/bogus2.png|''|http://eatfrenzy.com/images/success-tick.png"

这样，当错误发生时，您将源设置为''。这似乎也会产生一个错误，然后触发它尝试下一个来源......

Answer 5

这是正确的行为。您不想两次下载同一个图像——那是对带宽的浪费。

Chrome 会创建一个内存对象，然后将其应用于具有相应 src 的所有图像。

如果您需要下载两次，则通过 javascript 创建这些对象并将.onload=function() { .. } 分配给每个对象。