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

Question

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

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

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

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

Answer 1

编辑 16Nov16 2020GMT

也许您正在跟踪电子邮件或Javascript功能受限的其他客户端中的像素。

我想到的一个想法是在您<img>的srcURL中使用URL查询参数。

关于网络超时，我将提出一个想法，即用户打开一封电子邮件，完全加载该电子邮件，然后断开与Internet的连接，并且这不给跟踪器足够的时间来加载。

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowTimers/setTimeout

我建议setTimeout()在您的onerror函数内部使用。这将继续尝试设置/加载<img>的srcURL。您可以将成功加载所需的秒数src作为查询参数附加到文件的URL，例如?s=<sec>

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

onerror为<img>提供有关网络的有限信息

可从<img>以下网站找到 可用的信息：https：//www.w3.org/TR/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement

较旧的答案：

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

编辑 14Nov16 2018GMT

或者，使用AJAX来确定图像正确加载和再利用发送到AJAX为同一URL src您<img>。这当然是多余的，但可以避免长“数据” URL的问题。

编辑 15Nov16 0832GMT

另外，关于网络超时，我发现此线程很有用。JQuery Ajax-进行Ajax调用时如何检测网络连接错误 显然，您可以timeout像使用一样指定AJAX的名称error，只是手动提供毫秒。

转换为Base64

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

• https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa

  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状态代码？

$.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

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

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

  以这种方式使用通用图像查看应用程序会继承该应用程序支持的最危险类型的安全问题。

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

  目前尚不清楚在应用程序中使用长“数据” URL的影响。某些软件包遇到超过其分配的缓冲区大小的数据时，可能会表现出不合理的行为。

其他参考

• 未知的文件类型MIME？
• 用jQuery异步加载图像