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

Question

我的页面中有一个<img />元素，它的src属性经常被 Javascript 更改。

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

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

然后它相应地发送响应，图像或带有错误标头（状态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');
});

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

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

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 {
    //
}