关于JavaScript img.src onerror事件：JavaScript img.src onerror事件 – 获取错误原因


JavaScript img.src onerror event - get reason of error

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

从onerror收到的error对象似乎没有说明确切的原因。

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

编辑：
我不是在寻找另一种加载资源的方法，比如AJAX请求。 我需要专门针对带有onerror事件的标签的答案。 原因是我正在使用这种方法进行像素跟踪，我需要一种方法来重试网络错误。 我也没有寻找其他跟踪方法，如JSONP。

相关讨论

编辑16Nov16 2020GMT

也许你是电子邮件或Javascript功能有限的其他客户端的像素跟踪。

想到的一个想法是在的src URL中使用URL查询参数。

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

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

我建议在onerror函数中使用setTimeout()。
这将继续尝试设置/加载的src URL。您可以将成功加载到src文件的URL之前的秒数附加为?s=之类的查询参数

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

onerror for 提供有关网络的有限信息

可以在以下位置找到提供的信息
https://www.w3.org/TR/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement

error event img src

老答案：

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

编辑14Nov16 2018GMT

或者使用AJAX来确定图像是否正确加载，然后使用发送到AJAX的相同URL作为的src。它当然是多余的，但可以避免长"数据"URL的问题。

编辑15Nov16 0832GMT

关于网络超时，我发现这个线程是有用的JQuery Ajax - 如何在进行Ajax调用时检测网络连接错误
显然你可以像使用error一样指定timeout到AJAX，除了你只是手动提供毫秒。

转换为Base64

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

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

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

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

状态代码检查jQuery的AJAX

jQuery：如何从$ .ajax.error方法中获取HTTP状态代码？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.ajax({
    type: 'GET',
    url: '/path-to-my/image.png',
    data: null,
    success: function(data){
        alert('horray! 200 status code!');
        // convert to base64; add to img.src # btoa(data)
        document.querySelector("#hlogo img").src ="data:;base64,"+ data;
    },
    error:function (xhr, ajaxOptions, thrownError){
        switch (xhr.status) {
            case 400:
                 // Take action, referencing xhr.responseText as needed.

            case 404:
                 // Take action, referencing xhr.responseText as needed.

            case 500:
                 // Take action, referencing xhr.responseText as needed.
        }
});

笔记

  • https://tools.ietf.org/html/rfc2397#section-3

    1
    2
    3
    4
    dataurl    :="data:" [ mediatype ] [";base64" ]"," data
    mediatype  := [ type"/" subtype ] *(";" parameter )
    data       := *urlchar
    parameter  := attribute"=" value

  • https://tools.ietf.org/html/rfc2046#section-4.2

    Using of a generic-purpose image viewing application this way
    inherits the security problems of the most dangerous type supported
    by the application.

  • https://tools.ietf.org/html/rfc2397#page-4

    The effect of using long"data" URLs in applications is currently
    unknown; some software packages may exhibit unreasonable behavior
    when confronted with data that exceeds its allocated buffer size.

其他参考文献

  • 未知的文件类型MIME？
  • 使用jQuery异步加载图像
相关讨论