JavaScript img.src onerror事件 - 获取错误原因

时间：2016-11-13 10:12:16

标签： javascript

<img>加载错误可能有不同的原因，例如网络错误响应，错误的图像数据......

从error收到的

onerror对象似乎没有说明具体原因。

有没有办法知道错误是由于网络错误，比如HTTP 500还是网络超时？

修改 我不正在寻找加载资源的替代方法，例如AJAX请求。我需要专门针对<img>标记onerror事件的答案。原因是我使用这种方法进行像素跟踪，我需要一种方法来重试网络错误。我也没有寻找其他跟踪方法，例如JSONP。

1 个答案:

答案 0 :(得分：4)

修改16Nov16 2020GMT

在电子邮件或Javascript功能有限的其他客户端中，您可能pixel-tracking。

我想到的一个想法是在<img>的{​​{1}}网址中使用网址查询参数。

关于网络超时，我会提出这样的想法：用户打开电子邮件，完全加载电子邮件，然后断开与互联网的连接，不知何故，这不会给跟踪器足够的时间加载。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

我建议在src函数中使用setTimeout()。 这将继续尝试设置/加载onerror的{​​{1}}网址。您可以将成功加载到<img>文件的网址所需的秒数附加为src

之类的查询参数

至于确定图像加载的状态src代码，您可能需要考虑创建一个自定义?s=<sec>错误文件，然后创建 - 例如 - 一个包含各种类型的MySQL数据库条目您有权访问的信息，如果您选择使用之前提到的查询参数，则会向错误添加更多信息。

{h1> 500 500提供有关网络的有限信息

可以在onerror找到可从<img>获得的信息 https://www.w3.org/TR/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement

error event img src

旧答案：

您想尝试的路线也许是使用AJAX加载图像数据并将<img> src设置为接收到的图像数据的base64。我希望这会有所帮助。

修改<img>

或者使用AJAX来确定图像是否正确加载，然后使用发送到AJAX的相同URL作为14Nov16 2018GMT的{​​{1}}。它当然是多余的，但可以避免长“数据”URL的问题。

修改src

关于网络超时，我发现这个帖子很有用JQuery Ajax - How to Detect Network Connection error when making Ajax call 显然你可以指定<img>到AJAX，就像使用15Nov16 0832GMT一样，除了你手动提供毫秒数。

转换为Base64

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

或者，如果您对能够使用error的旧浏览器感到不满，那么您可能对Google的https://chromium.googlesource.com/chromiumos/platform/spigots/+/refs/heads/firmware-u-boot-v1/base64_encode.js

感兴趣

状态代码检查jQuery的AJAX

jQuery: How to get the HTTP status code from within the $.ajax.error method? 

var encodedData = window.btoa("Hello, world"); // encode a string

注释

其他参考资料

相关问题
最新问题