使用JS缓存图像

我正在使用光栅贴图（小册子）构建360度查看器，该查看器使用的视图超过85.000个图像。为了提高观众的表现，我正尝试缓存所有图像，但web浏览器总是返回：网:: ERR_INSUFFICIENT_RESOURCES使用JS缓存图像

所以我的问题是，有没有办法避免这种情况？

我正在使用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); 
    } 
}

非常感谢您的帮助！

来源

2016-08-03 victoradv

所以你试图在加载页面时加载85,000个图像？ 0.o尝试仅延迟加载屏幕上实际可见的图像。有数百个插件可以为你做到这一点。这也将阻止你的服务器在堆中摔倒，并为你节省了很多带宽 –

我试图预加载所有这些图像，因为在缩放或旋转时，查看器的性能很慢或性能很差。这就是我决定这样做的原因。它在本地服务器上正常工作，但不在远程。如果我只加载可见图像，则加载的下一张图像会延迟观看者。你能告诉我任何这些插件的名称吗？ – victoradv

@victoradv，你知道一个加载的图像消耗至少宽*高* 4字节的内存;独立于格式或文件大小。所以即使你的85000图像只有10×10像素，它们也已经消耗了32MB。不要预先加载所有图像，预先载入最有可能需要的图像。第2位。不要保留对图像节点的引用。加载图像并依靠浏览器缓存。 – Thomas

为了缓存和延迟加载图像，现有技术的状态是Service Workers。这将允许您对浏览器的缓存进行精细控制，而无需依赖每页JavaScript。

来源

2016-08-04 09:03:35 IvanSanchez

使用JS缓存图像

回答

相关问题