为什么Chrome的onerror事件只能触发img元素？ [英] Why is Chrome's onerror event for the img element only fired once?

问题描述

为什么Chrome只会在所有其他浏览器（IE7,8,9，FF，Opera和Safari）都重复调用img元素时才调用img元素的onerror事件？

Why is Chrome is only calling the onerror event for the img element one time when all other browsers (IE7,8,9, FF, Opera, and Safari) all call it repeatedly?

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

Is there a way to force it to repeat the onerror call again (in Chrome)?

jsfiddle

HTML：

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：

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在第二次尝试后才能保释。

Per @Sunil D.'s comment about Chrome not issuing a new lookup due to invalid domain name of www.asdfjklasdfasdf.com in the initial fiddle example, I went ahead and changed the domain name to match that of the success image, but with a different filename so it still is a 404. That will prove it's not the invalid domain name causing Chrome to bail out on the 2nd attempt.

编辑：
更新小提琴并删除使用jquery简单的事情和规则。

Updated fiddle and removed use of jquery to simply things and rule that out.

推荐答案

在您分配给onerror事件的函数内，将 src 属性设置为 null ，然后将其更改为新值。

Okay got it. Inside the function you assign to the onerror event, set the src attribute to null before changing it to it's new value.

img.setAttribute('src', null);

工作小提琴




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




注意：空字符串不起作用，需要 null 。


Note2：此修复程序使用纯JavaScript（但不是使用jquery .attr 方法）。在我发布这个解决方案后，我尝试使用jquery .attr 方法将其设置为 $ img.attr（'src'，null）; 但它没有这样工作，当我将其更改为javascript，它的工作。我也尝试使用jquery .prop 方法，而不是这样 $ img.prop（'src'，null）; 这是第一次工作，失败了几个后续的刷新。只有纯粹的JavaScript似乎是一个确定的解决方案。

working fiddle

This somehow causes Chrome to reset it and will force it to repeatedly call onerror if subsequent values for src return an error.

Note: an empty string won't work and needs to be null.
Note2: this fix works using pure javascript (but not with the jquery .attr method). After I posted this solution I tried it with the jquery .attr method setting it to $img.attr('src', null); but it didn't work that way and when I changed it to javascript, it worked. I also tried it using the jquery .prop method instead like so $img.prop('src', null); which worked the first time and failed on a few subsequent refreshes. Only the pure javascript seems to be a surefire solution.

更新：

好​​的，更改修复Chrome并导致它像所有其他其他浏览器（FF，Safari，Opera，IE7-9）重复调用onerror，它会导致IE10的onerror事件出现问题，从而忽略分配给的任何有效图像在上一行将其设置为 = null 之后，src （...叹息）。

UPDATE:
Okay, turns out that while the above change fixes Chrome and causes it to repeatedly call onerror like all other other browsers (FF, Safari, Opera, IE7-9), it causes problems with the onerror event for IE10 and thus ignores any valid images assigned to src after setting it to =null on the previous line. (...sigh).

这篇关于为什么Chrome的onerror事件只能触发img元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！