javascript - 无法从缓存中加载图像

Question

尝试用缩略图建立画廊。 您单击缩略图，主图像容器将显示它。

似乎当我更改容器的 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});
    });

}

每当我点击拇指时，这将导致该照片的重新加载非常缓慢。

第二(我已经在这里问过): 在这里，我从缩略图背景中获取照片作为来源:

//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)，对于画廊来说这是一个糟糕的用户体验。

Answer 1

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

不要使用直接 url，而是下载文件并将其制作成 blob url。将 blob url 的引用保留在 cacheImages 中，就像您正在做的那样。然后在其他地方使用博客网址，资源将不会再次下载。

可以引用How to get a File() or Blob() from an URL in javascript?了解如何获取图像并将其转换为 blob url。