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

Question

当所有其他浏览器(IE7,8,9,FF,Opera和Safari)都重复调用它时,为什么Chrome只调用img元素的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;    
}

编辑: Per @Sunil D.关于Chrome由于初始小提示示例www.asdfjklasdfasdf.com中的域名无效而未发布新查询的评论,我继续更改域名以匹配成功图片的域名,但文件名不同所以它仍然是404.这将证明这不是无效的域名导致Chrome在第二次尝试中纾困.

编辑: 更新了小提琴并删除了jquery的使用,只是简单的事情和规则.

Answer 1

好,知道了.在为onerror事件指定的函数内部,将src属性设置为null在将其更改为新值之前.

img.setAttribute('src', null);

工作小提琴

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

注意:空字符串不起作用且需要null.
注意2:此修复使用纯javascript(但不使用jquery .attr方法).在我发布这个解决方案后,我尝试使用jquery .attr方法将其设置为$img.attr('src', null);但是它没有那样工作,当我将其更改为javascript时,它工作.我也尝试使用jquery .prop方法,因为$img.prop('src', null);它第一次工作,并在几次后续刷新失败.只有纯粹的JavaScript似乎是一个万无一失的解决方案.

更新:
好吧,事实证明,虽然上面的更改修复Chrome和使它重复调用的onerror像其他所有其他浏览器(FF,Safari浏览器,歌剧,IE7-9),它会导致与IE10 onerror事件问题,从而忽略任何src在将其设置为=null上一行后分配给的有效图像.(...叹).

Answer 2

我已经试过上述文件档案化管理的方式,的setAttribute("src"中,NULL)有一个副作用,即,添加其他请求.

最后,我用

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

,这个有效!

例如,请参阅jsfiddle.