如何獲取HTTP的狀態碼 <img> 標簽

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

您必須在圖像上添加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');
    })
    ;