javascript - 从图像错误处理程序中读取响应 header

Question

我有一个 <img />我页面中的元素，它是 src属性由 Javascript 定期更改。

当 src属性更改，我在服务器上的代码检查:

1. 用户登录了吗？
2. 图像是否存在？

然后它相应地发送响应，可以是图像或带有错误 header 的响应(状态 403 Forbidden 或 404 Not Found)。

这是我的问题:我使用以下代码处理 img 错误

$(function(){
    var $img = $('#test_image');
    $img.on('error',function(e){
        // here, I need to read the headers (at least status code)
        console.log(e);
    }).attr('src','http://example.com/loadimg.php?img=3');
});

如果用户因为 session 已过期而无法加载图像，或者如果他尝试加载的图像不存在，我需要显示一条不同的错误消息。

我在哪里可以找到 eventObject 中的响应 header 和/或状态代码来自处理程序？

jsfiddle

Answer 1

如果开销对你来说不是太多，你可以发送一个 Head 请求以查看错误情况下的返回值

var http = new XMLHttpRequest();
http.open('HEAD', url, true); // True is for async
http.send();
if (http.status == 404) {
    //
} else if (http.status == 403) {
    //
} else {
    //
}