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

Question

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

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

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

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

Answer 1

编辑16Nov16 2020GMT

也许你是pixel-tracking在电子邮件或其他 Javascript 功能有限的客户端中。

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

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

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

我建议使用 setTimeout()在你的里面 onerror功能。这将继续尝试设置/加载 <img>的 src网址。您可以将成功加载所需的秒数附加到 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 确定图像是否正确加载，然后使用与 src 相同的 URL 发送到 AJAX为你的 <img> .这当然是多余的，但可以避免长“数据”URL 的问题。

编辑15Nov16 0832GMT

关于网络超时，我发现这个线程很有用 JQuery Ajax - How to Detect Network Connection error when making Ajax call显然你可以指定一个 timeout到 AJAX 很像使用 error除非您手动提供毫秒数。

转换为 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

    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: How to get the HTTP status code from within the $.ajax.error method?

$.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://www.rfc-editor.org/rfc/rfc2397#section-3

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

• https://www.rfc-editor.org/rfc/rfc2046#section-4.2

Using of a generic-purpose image viewing application this wayinherits the security problems of the most dangerous type supportedby the application.

• https://www.rfc-editor.org/rfc/rfc2397#page-4

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

其他引用资料

• Unknown file type MIME?
• Asynchronously load images with jQuery