使用JS缓存图像

Question

我正在使用光栅图块（传单）构建360度查看器，每个视图使用超过85.000个图像。 为了提高观众的表现，我试图缓存所有图像，但是webbrowser总是返回： net :: ERR_INSUFFICIENT_RESOURCES

所以我的问题是，有什么方法可以避免这种情况吗？

我正在使用setInterval(foo, 1000)来执行此操作。像这样：

function restImg() {
    counter = setInterval(ld, 2000);
}

function ld() {
    if (!(nmb >= 80)) {
        for (var i = 0; i < images.length; i++) {
            var idx = images[i].indexOf("-");
            var path = images[i].substr(0, idx + 1);
            nmb = parseInt(images[i].substr(idx + 1, 3));
            var rest = images[i].substr(idx + 4, images[i].length);
            nmb++;
            var img = "";
            if (nmb <= 9) {
                images[i] = path + "00" + nmb + rest;
                img = new Image();
                img.src = images[i];
            } else {
                images[i] = path + "0" + nmb + rest;
                img = new Image();
                img.src = images[i];
            }
        }
    } else {
        clearInterval(counter);
    }
}

非常感谢你的帮助！

Answer 1

为了缓存和延迟加载图像，最先进的技术是Service Workers。这将允许您对浏览器的缓存进行细粒度控制，而无需依赖每页javascript。