Question

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

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

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

将事件处理程序附加到image元素的onload事件，如果服务器返回202响应，它将隐藏图像并在其位置显示占位符图像。
如果图像未加载200状态，则启动定期ajax rqeuest，定期检查图像是否现在可用，以及何时再次显示图像。

但是这个系统工作不正常，因为我无法看到如何在onload事件中告知来自202响应的200个响应，因此无法确定何时需要设置ajax回调。

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

btw我已经考虑将生成图像的响应代码更改为被认为是错误的响应代码，但同样的问题也适用;如何区分'继续尝试加载此图像'与真正的服务器错误。

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

Answer 2

看起来有点像我原先问的那样可能是不可能的。这是我用来解决无法获取状态代码的黑客攻击。

更改服务器以返回状态代码，该代码表示仍在生成映像时出错。我选择420 - ＆＃39;增强你的平静＆＃39;
让启动Ajax异步的回调正在收听＆＃39; onerror＆＃39;事件。

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

如果初始图像请求失败，则启动ajax内容。因为在最初的错误回调中，我们无法区分实际的服务器错误和420＆＃39;图像仍在生成＆＃39;错误，这意味着当出现错误时会有重复请求.....但这种情况很少发生，我们并不关心错误延迟一秒。

如何从onload事件

2 个答案: