无法从缓存加载图像。

Question

尝试使用缩略图构建图库。

您点击缩略图，主要的图片容器将显示它。

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

我尝试了2种方法，但两种方法的结果都相同。

第一种方法：

    //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});
    });

}

当我点击缩略图时，这将导致该照片重新加载非常缓慢。

第二条（我已经在这里提出了问题）： 在这里，我从缩略图背景中获取照片作为源：

//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
      });
  });
})

两种方式都会导致图片重新加载，需要耗费2秒钟的时间。 这些图片非常小（300k），对于相册来说这是不好的用户体验。

- hkrly

Answer 1

---

如果您希望浏览器从缓存加载图像，则必须在服务器上进行配置。您可以使用Etag-Header或Cache-Control Header。这将让浏览器知道它可以从缓存中加载这些资源。

- manoi

---

什么？不是的...浏览器如果没有进行其他配置，默认情况下会缓存加载到文档中的每张照片，除非它真的很大。 - hkrly

Answer 2

虽然我不知道浏览器内部原理以及为什么它不能进行缓存，但我能想到的一个解决方案是：

不要使用直接的url，而是下载文件并将其转换为blob url。像你现在做的那样，在cacheImages中保留blob url的引用。然后在其他地方使用blob url，资源就不会被再次下载。

您可以参考如何在javascript中从URL获取File()或Blob()，了解如何获取图像并将其转换为blob url。

- vatz88

---

谢谢，我考虑过这个问题，但我意识到如果我这样做，那么肯定有问题，因为图片应该被缓存，但由于某些原因它们没有被缓存。这是否与URL中包含来自Google（Firebase）的令牌有关？ - hkrly

我认为没有任何关于浏览器缓存如何以及何时缓存的标准。这完全取决于浏览器。此外，是的，URL 应该完全匹配才能使浏览器缓存正常工作，例如查询参数和所有内容都应该完全相同。我提出的解决方案在所有浏览器中的行为可能更加可靠。 - vatz88

非常感谢！我会去查看的，尽管我仍然有这个问题在脑海中——为什么Chrome和Safari都不缓存这样小的图片。 - hkrly