Javascript 如何从onload事件中获取准确的HTTP状态代码

在我的服务器上，有些图像需要很长时间才能生成，但生成后会被缓存，因此后续的请求很快

当前，当映像仍在生成时，服务器正在返回202接受的HTTP状态结果。当图像已经生成时，它返回200个结果，并且可以立即发送

为了避免网页长时间出现“损坏的图像”，我有：

• 将事件处理程序附加到image元素的onload事件，如果服务器返回202响应，该事件处理程序将隐藏图像并在其位置显示占位符图像

• 如果图像未加载200状态，则启动定期ajax RQUEST，定期检查图像是否可用，以及何时再次显示图像

但是，这个系统不能正常工作，因为我看不到如何在onload事件中从202个响应中区分200个响应，因此无法判断何时需要设置ajax回调

如何确定触发onload事件的响应的状态代码是什么

---

顺便说一句，我考虑过将仍在生成图像时的响应代码更改为被视为错误的响应代码，但同样的问题也适用；如何区分“继续尝试加载此映像”和真正的服务器错误。

不要侦听onload事件，而是使用XHR获取映像并侦听onreadystatechange事件

下面是一个例子：

---

看起来有点像这样，可能不可能按照我最初的要求去做。这就是我用来解决无法获取状态代码的问题的黑客方法

• 更改服务器以返回状态代码，该代码指示仍在生成映像时出错。我选择420-“增强你的冷静”

• 使用于启动Ajax异步进程的回调侦听“onerror”事件

现在，如果浏览器加载的图像正常，则根本不会调用回调，并且图像会尽快显示

---

如果初始图像请求失败，那么ajax工作就开始了。因为在最初的OneError回调中，我们无法区分实际的服务器错误和420“映像仍在生成”错误之间的区别，这意味着出现错误时会有重复的请求……但这种情况很少发生，我们不在乎错误延迟一秒钟。

我没有使用ajax请求，所以我对您的评论感到有点困惑。我附加到文档onload/error事件，即$（this.element）.find（'.exampleImage'）.on（'load'，$.proxy（this，'imageResult'））；当回调名为e.currentTarget时，它是一个HTMLImageElement对象，而e.currentTarget.status是未定义的。@apsillers恼火的是，它以前就是这样做的……但我查看了google页面速度分析器，它告诉我页面不好，因为在加载并运行javascript之前，图像无法完全显示。我非常不喜欢加载时页面“闪烁”……我认为这样做是明智的。因为你的定期检查是用Ajax完成的，所以我（错误地）认为你的初始加载也是通过Ajax完成的。我怀疑状态信息对元素事件处理程序不可用。当然，这里需要另一种方法（错误状态代码，或者一个像素宽度的图像，可能？）使用XHR抓取图像以获取HTTP状态：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    console.log("State: ", this.readyState, "Status: ", this.status);
    if (this.readyState == 4 && this.status == 200) {
        var url = window.URL || window.webkitURL;
        document.querySelector("#img").src = url.createObjectURL(this.response);
    } else if (this.readyState == 4) {
        console.log(this.status);
    } else {
        //not ready yet
    }
}
xhr.open('GET', 'image.png');
xhr.responseType = 'blob';
xhr.send();