javascript 如何获取<img>标签的HTTP状态码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8108636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get HTTP status code of <img> tags
提问by Artem Pyanykh
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
- 500代码：做这个东西。
- 503代码：做那些事
and so on.
等等。
So, my question: is there any way to get status code within "img" tag on-error event handler?
所以，我的问题是：有没有办法在“img”标签错误事件处理程序中获取状态代码？
采纳答案by Pablo Santa Cruz
No, there is no way to get the HTTP status from a request made by an imgtag in JavaScript.
不，无法从imgJavaScript 中的标记发出的请求中获取 HTTP 状态。
You could write a firefox plugin, chrome/safari extension to do that.
你可以编写一个 firefox 插件、chrome/safari 扩展来做到这一点。
An alternative would be using AJAX to load your images (not using imgtags). You can get Http Status Codes from Ajax Requests.
另一种方法是使用 AJAX 加载图像（不使用img标签）。您可以从 Ajax 请求中获取 Http 状态代码。
回答by Wojciech Bednarski
You cannot check HTTP status this way. However you can check if image was loaded or not using naturalWidth property.
您无法通过这种方式检查 HTTP 状态。但是，您可以使用 naturalWidth 属性检查图像是否已加载。
if (img.naturalWidth === 0) {
// do sth
}
Hope it help.
希望有帮助。
回答by iEfimoff
You may combine the couple technics to get img.status:
你可以结合这对夫妇的技术来获得 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';
}
回答by Adeptius
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;
}
}
回答by jeremymarc
You have to add an eventListener on images :
您必须在图像上添加一个 eventListener ：
For example with jQuery :
例如使用 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');
})
;
