從圖像錯誤處理程序中讀取響應頭

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