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

Question

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

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

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

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

• 如果图像未加载且状态为 200，则启动周期性的 ajax rqeuest，它将定期检查图像现在是否可用，以及何时再次显示图像。

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

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

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

Answer 1

不是监听 onload 事件，而是使用 XHR 获取图像并监听 onreadystatechange 事件。

这是一个例子:http://jsfiddle.net/DerekL/rwewrrod/

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();