如何获取的HTTP状态码标签

Question

我有一个页面，其中包含许多图像，这些图像是根据用户操作在服务器端生成的。当图像加载成功时我很高兴，但是当服务器上出现错误时我必须根据发生的错误采取行动。

例如：

• 500代码：做这个东西。
• 503代码：做那些事情

等等。

那么，我的问题：有没有办法在“img”标签错误事件处理程序中获取状态代码？

Answer 1

不，无法从 JavaScript 中的 img 标记发出的请求中获取 HTTP 状态。

你可以编写一个 firefox 插件、chrome/safari 扩展来做到这一点。

另一种方法是使用 AJAX 加载图像（不使用 img 标签）。您可以从 Ajax 请求获取 Http 状态代码。

Answer 2

您无法通过这种方式检查 HTTP 状态。但是，您可以使用 naturalWidth 属性检查图像是否已加载。

if (img.naturalWidth === 0) {
    // do sth
}

希望有帮助。

Answer 3

您可以结合几种技术来获取 img.status：

<img src="/no.img" onerror="error(this)">

function error(img) {
   var r = makeXMLHttpRequestAgain(img.src);
   if (r.status === 500) img.src = '/e500.img';
   if (r.status === 503) img.src = '/e503.img';
}

Answer 4

 function loadBinaryImageAndInsertToImgTag(imgElement, imageUrl) {
        let xhr = getXMLHttpRequest();
        xhr.onreadystatechange = ProcessResponse;
        xhr.open("GET", imageUrl, true);
        xhr.overrideMimeType('text/plain; charset=x-user-defined');
        xhr.send(null);

        function getXMLHttpRequest() {
            let xhr = null;

            if (window.XMLHttpRequest || window.ActiveXObject) {
                if (window.ActiveXObject) {
                    try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                } else {
                    xhr = new XMLHttpRequest();
                }
            } else {
                alert("Your browser does not support XMLHTTP");
                return null;
            }
            return xhr;
        }

        function ProcessResponse() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    imgElement.src = "data:image/jpeg;base64," + encode64(xhr.responseText);
                    imgElement.style.display = "";
                } else {
                    alert("Error retrieving data!");
                }
            }
        }

        function encode64(inputStr) {
            let b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
            let outputStr = "";
            let i = 0;

            while (i < inputStr.length) {
                let byte1 = inputStr.charCodeAt(i++) & 0xff;
                let byte2 = inputStr.charCodeAt(i++) & 0xff;
                let byte3 = inputStr.charCodeAt(i++) & 0xff;
                let enc1 = byte1 >> 2;
                let enc2 = ((byte1 & 3) << 4) | (byte2 >> 4);
                let enc3, enc4;
                if (isNaN(byte2)) {
                    enc3 = enc4 = 64;
                }
                else {
                    enc3 = ((byte2 & 15) << 2) | (byte3 >> 6);
                    if (isNaN(byte3)) {
                        enc4 = 64;
                    }
                    else {
                        enc4 = byte3 & 63;
                    }
                }
                outputStr += b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4);
            }
            return outputStr;
        }
    }

Answer 5

您必须在图像上添加事件监听器：

例如使用 jQuery：

$('#your_image')
    .error(function(e) {
        //add your unhappy code here

        //unbind if needed
        $(this).unbind('error');
    })
    .load(function(e) {
        //add your happy code here

        //unbind if needed
        $(this).unbind('load');
    })
    ;