Question

<img src="/a.jpg" onerror="fetch(\'/a.jpg\')
    .then(code => console.log(code === 499
        ? 'image will be available in a moment'
        : 'image not found'))">

是否可以在不触发两个HTTP请求（一个由img.src和一个由fetch函数触发）的情况下做到这一点？

我的用例是我想触发一个轮询循环（为了简化起见，我已经实现了，只是跳过了它），如果仍在服务器上准备该图像，它将重试加载该图像（该循环当然会触发更多操作） HTTP请求，但可以），但是如果图像实际上不存在，则显示“找不到图像”。

例如，可以通过以下方式实现服务器：

如果图像存在并且已准备好缩略图，请返回图像响应
如果图像存在但缩略图尚未准备好，请返回特定的HTTP代码（499）

与现代浏览器和IE 11的兼容性对我来说就足够了。

Answer 1

最后自己找到了解决方案-使用XHR加载图像并使用BLOB API进行显示。

此解决方案提供了我想要的一切：

仅触发单个HTTP请求以获取{image|error code}，
不需要其他用户权限（例如使用webRequest钩子实现），
不会污染具有超长base64网址的DOM，
似乎与现代浏览器甚至IE10兼容。

var myImage = document.querySelector('img');

var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'http://placekitten.com/123/456', true);
myRequest.responseType = 'blob';
myRequest.onreadystatechange = () => {
    if (myRequest.readyState !== 4) {
        return;
    }
    if (myRequest.status === 200) {
        var blob = myRequest.response;
        var objectURL = URL.createObjectURL(blob);
        // this is the trick - generates url like 
        // blob:http://localhost/adb50c88-9468-40d9-8b0b-1f6ec8bb5a32
        myImage.src = objectURL;
    } else if (myRequest.status === 499) {
        console.log('... waiting for thumbnail');
        retryAfter5s(); // implementation of retry loop is not important there
    } else {
        console.log('Image not found');
    }
};
myRequest.send();

通过javascript处理特定的图像响应

1 个答案: