Javascript 如何获取<；的HTTP状态代码；img>；标签

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

例如：

• 500代码：做这件事
• 代码503：做那些事

等等

---

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

否，无法从JavaScript中的

img

标记发出的请求中获取HTTP状态

你可以编写一个firefox插件，chrome/safari扩展来实现这一点

---

另一种方法是使用AJAX加载图像（不使用

img

标记）。您可以从Ajax请求中获取Http状态代码。

您必须在图像上添加eventListener：

例如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');
    })
    ;

---

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

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

---

希望对您有所帮助。

您可以结合这两种技术获得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';
}

功能错误（img）{
var r=makeXMLHttpRequestAgain（img.src）；
如果（r.status==500）img.src='/e500.img'；
如果（r.status==503）img.src='/e503.img'；
}

函数loadBinaryImageAndInsertToImgTag（imgElement，imageUrl）{
设xhr=getXMLHttpRequest（）；
xhr.onreadystatechange=ProcessResponse；
xhr.open（“GET”，imageUrl，true）；
xhr.overrideMimeType（'text/plain；charset=x-user-defined'）；
xhr.send（空）；
函数getXMLHttpRequest（）{
设xhr=null；
if（window.XMLHttpRequest | | window.ActiveXObject）{
if（window.ActiveXObject）{
试一试{
xhr=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
xhr=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
}否则{
xhr=newXMLHttpRequest（）；
}
}否则{
警报（“您的浏览器不支持XMLHTTP”）；
返回null；
}
返回xhr；
}
函数ProcessResponse（）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
imgElement.src=“数据：图像/jpeg；base64，”+encode64（xhr.responseText）；
imgElement.style.display=“”；
}否则{
警报（“检索数据时出错！”）；
}
}
}
函数encode64（inputStr）{
设b64=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyz012456789+/=”；
让outputStr=“”；
设i=0；
while（i>2；
设enc2=（（字节1和字节3）>4）；
设enc3，enc4；
if（isNaN（字节2））{
enc3=enc4=64；
}
否则{
enc3=（（字节2和字节15）>6）；
if（isNaN（字节3））{
enc4=64；
}
否则{
enc4=字节3和字节63；
}
}
输出str+=b64.charAt（enc1）+b64.charAt（enc2）+b64.charAt（enc3）+b64.charAt（enc4）；
}
返回outputStr；
}
}

请注意，从“浏览器触发错误事件之前必须附加事件处理程序，这就是示例在附加处理程序后设置src属性的原因。”（重点是我的）。只要对其抛出一些jQuery，它肯定会解决问题！你为什么要在客户身上处理这些问题？为什么不让服务器正确处理这些图像？@Raynos情况是这样的：图像是在服务器上动态创建的，但这需要很多时间，这意味着当浏览器请求时，其中一些图像无法准备好。同时，服务器端可能会出现一些严重错误，根本不会有映像。所以，基于http状态，我必须再次向服务器请求图像，或者只是通知用户错误。不，您仍然在做错误的事情。您有一个HTTP服务器，当您收到一个图像的传入get请求时，您可以“等待”它准备就绪。如果发生严重错误，您可以返回“严重错误”图像。@Raynos很遗憾，我只在前端工作，无法访问后端。我对问题的状况不满意。据我所知，服务器无法保持大量的开放连接，所以我只能询问映像是否准备好，而不是等待映像准备好。插件是不可接受的。AJAX看起来不错，但是我应该通过AJAX获得什么样的数据呢？我可以检索图像数据，但无法使用它创建img元素。您很可能需要将其作为数据url发送。您可能需要找到某种可以在服务器端生成数据URL的库。一旦它们到达，只需将img的src设置为数据url即可。这将为加载图像增加大量开销。真正的解决方案可能是修复服务器，使其始终成功地发送图像。Ajax不是一个好的替代品，以防您想要加载的图像被放置在外部域上。2016年这个问题有什么新消息吗？对于阅读此页面的任何人来说，并非所有浏览器都支持naturalWidth属性。这个属性也是非常敏感的-您应该只在图像加载后尝试读取它。我希望这会有帮助@你指的是09年的帖子。现在它在所有最新版本的浏览器中都能正常工作

 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;
        }
    }