javascript - 图像失败需要多长时间？

Question

我从互联网上加载图像:

img.src = 'some_path'

我注意到有些图片在网速慢的情况下需要很长时间才能加载，有些图片需要很长时间才能加载然后失败。

有时，域一起关闭。如果服务器宕机了，这会很好用，因为很快就会抛出错误，我可以捕获错误并相应地更改 src。

但是，对于速度缓慢然后失败的页面 - 我看到浏览器在最终出错之前显示某种空白框，似乎持续了 10 秒或更长时间。

似乎太长了。我会说给网站大约 4 秒，如果它没有响应则抛出错误。

有没有办法调整这个？

客户端在抛出错误之前等待的时间？

让这种空白的 blox 盯着用户 10 秒或更长时间看起来很草率。

目前在 FireFox 中。

Answer 1

我知道设置超时以在脚本中获取某些内容的唯一方法是使用 XMLHttpRequest，例如，您可以通过 ajax 加载图像；

function getImage(src, callback, maxTime) {
    var x = new XMLHttpRequest();
    if (maxTime) x.timeout = maxTime;
    x.onload = function () {
        var img = new Image();
        img.src = window.URL.createObjectURL(this.response);
        callback(img);
    };
    x.onerror = function () {
        callback(null);
    };
    x.open('GET', src, true);
    x.responseType = 'blob'; // save having to re-create blob
    x.send(null);
}
getImage(
    'some_path',     // get image at "some_path"
    function (img) { // then
        if (!img) alert('failed!');          // whatever if didnt work
        else document.body.appendChild(img); // whatever if did work
    },
    4000             // maximum wait is 4 seconds
);

这种方法的缺点是浏览器向后兼容，如果服务器返回一些东西但它不是图像