Javascript 无法从缓存加载图像

试图用缩略图建立一个图库。 单击缩略图，主图像容器将显示它

似乎当我更改容器的URL时，它总是从Internet重新加载图像，而不是缓存它

我尝试了两种方法，都有相同的结果

首先：

    //save to cache right when script is loaded
    var cacheImages =[];
    preloadimgs();
    function preloadimgs(){
        for(var k=0;k<5;k++) {
          var img = new Image();
          img.src = currentStore.product.media.photos[k];
          cacheImages.push(img);
        }
    }

//load
    function thumb(arg){


   var prvimgShow = cacheImages[arg].src;
   var finalurl="url("+prvimgShow+")";

   $("#preview").stop().animate({opacity: 0.7},100,function(){
       $(this).css({'background-image': finalurl})
                  .animate({opacity: 1},{duration:200});
    });

}

这两种方法都会导致重新加载图像，需要2秒钟。 图像非常小（300k），对于画廊来说，这是一个糟糕的用户体验。

---

---

如果希望浏览器从缓存加载图像，则必须在服务器上进行配置。您可以使用Etag标头或缓存控制标头。这将让浏览器知道它可以从缓存加载这些资产。

虽然我不知道浏览器的内部结构以及它不缓存的原因，但我能想到的解决方案之一是：

不要使用直接url，而是下载文件并将其转换为blob url。将blob url的引用保留在

cacheImages

中，就像您所做的那样。然后使用博客url，否则将无法再次下载资源

---

您可以参考如何获取图像并将其转换为blob url。

什么？不一点也不。浏览器如果没有配置，默认情况下会缓存加载到文档中的每一张照片，除非它真的很大。谢谢，我考虑过这一点，但我意识到如果我这样做，那么就会出问题，因为图像应该被缓存，而由于一些不好的原因，它们没有被缓存。这是否与URL中有来自Google（Firebase）的标记这一事实有关？我认为浏览器应该如何以及何时缓存没有任何标准。这完全取决于浏览器。此外，是的，url应该完全匹配浏览器缓存以像查询参数一样工作，并且所有内容都应该完全相同。我提出的解决方案更充分地证明了它可能在所有浏览器中都有相同的行为。非常感谢！我会看看的，尽管我心里还有这个问题——为什么Chrome和Safari都不缓存这么小的图像。

//get a thumb's background photo
var prvimgShow = document.getElementById("thumb0").style.backgroundImage;

//show it
$('#thumb0').on('click', () => {
  $("#preview").stop().animate({
    opacity: 0.7
  }, 100, function() {
    $(this).css({
        'background-image': prvimgShow
      })
      .animate({
        opacity: 1
      }, {
        duration: 200
      });
  });
})