javascript - How to get HTTP status code of <img> tags - Stack Overflow

admin管理员组

文章数量:1192344

I have a page with a lot of images that are generated server-side depending on user actions. And when image loads successfully I'm happy, but when there is an error on the server I have to act according to what an error occurred.

For example:

• 500 code: do this stuff.
• 503 code: do that stuff

and so on.

So, my question: is there any way to get status code within "img" tag on-error event handler?

I have a page with a lot of images that are generated server-side depending on user actions. And when image loads successfully I'm happy, but when there is an error on the server I have to act according to what an error occurred.

For example:

• 500 code: do this stuff.
• 503 code: do that stuff

and so on.

So, my question: is there any way to get status code within "img" tag on-error event handler?

• javascript
• image
• http-status-codes

Share Improve this question Follow edited Feb 1, 2013 at 0:13 Brock Adams 93.4k2323 gold badges240240 silver badges304304 bronze badges asked Nov 13, 2011 at 0:23 Artem PianykhArtem Pianykh 1,18122 gold badges1010 silver badges2323 bronze badges 4

• 1 Why the hell would you ever handle such issues on the client? Why don't you get the server to handle these images properly? – Raynos Commented Nov 13, 2011 at 0:34
• 2 @Raynos the situation is such: images are created dynamicaly on the server, but it takes a lot of time, which means some of them won't be ready when browser asks for them. At the same time some critical error may occur on the server-side and there will be no image at all. So, based on http status, I have to ask server for images once again, or just inform user, about error. – Artem Pianykh Commented Nov 13, 2011 at 0:52
• No, your still doing it wrong. You have a HTTP server, when you get an incoming GET request for an image you can "wait" for it to be ready. And if a critical error occured you can return a "critical error" image. – Raynos Commented Nov 13, 2011 at 0:54
• 4 @Raynos unfortunately, I'm working only on the front-end, and don't have access for the back-end. I'm not happy with the conditions of the problem. As far as I know server cannot afford keeping lots of open connections, so I can only ask whether image is ready or not, not waiting for the image to be ready. – Artem Pianykh Commented Nov 13, 2011 at 1:08

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 12

No, there is no way to get the HTTP status from a request made by an img tag in JavaScript.

You could write a firefox plugin, chrome/safari extension to do that.

An alternative would be using AJAX to load your images (not using img tags). You can get Http Status Codes from Ajax Requests.

You cannot check HTTP status this way. However you can check if image was loaded or not using naturalWidth property.

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

Hope it help.

You may combine a couple of techniques to get 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';
}

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

You have to add an eventListener on images :

For example with 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');
    })
    ;

本文标签： javascriptHow to get HTTP status code of ltimggt tagsStack Overflow