Javascript：如何检查图像是否已被缓存

我刚刚开始学习一点JavaScript，我想知道是否有方法检查图像是否已加载到缓存。Javascript：如何检查图像是否已被缓存

在我的脚本im从另一个网页加载一些随机图像并显示它们。当第二次显示相同的图像时，脚本将不会使用已经加载的图像，而是再次加载相同的图像，以便其中两个存储在我的缓存中。

现在我想检查图像是否已经存储在缓存中，如果是，请使用缓存的图像而不是再次加载图像。

我的代码：

<script> 
    var img = document.createElement('img'); 
    var index; 

    //On Click create random 3digit number between 1 and 100 
    document.getElementById('image').onclick = function(){ 
     var index = '' + Math.floor(Math.random() * 100 +1); 

     while(index.length < 3) { 
      index = '0' + index; 
     } 

     loadImages(index); 
    }; 

    //Load the image with the created number 
    function loadImages(id) { 
     var src = 'someWebPage/' + id +'.png';    

     img.onload = function() { 
      document.getElementById('image').getContext("2d").drawImage(img, 0, 0, 300, 300); 
     } 

     img.src = src;    
    } 
</script>

我的缓存图片：

正如你可以看到030.png和032.png在高速缓存中的两倍。

希望你能给我一些建议。

编辑： 只为面对这个问题的任何人，它实际上不是一个。 Chrome已经做的一切正确，我只是没有注意到。正如您在Size列中看到的那样，图片已经从我的缓存中加载。

来源

2017-07-03 FatTony

https://stackoverflow.com/questions/2446740/post-loading-check-if-an-image-is-in-the-browser-cache –

浏览器在内部处理这个......你无法控制它并且无法访问缓存 – charlietfl

处理缓存（在此上下文中）的方式是由浏览器使用一组头来与服务器进行协商，以基本上告诉服务器“我已拥有此资源的此版本”，服务器可以响应“好的，这仍然有效，不需要下载任何新的东西”。所以你不应该关心JavaScript端的缓存，而是要确保你在服务器端设置了正确的Cache-Control头文件。您的服务器/框架可能已经存在关于如何在那里设置缓存的问题/答案。

来源

2017-07-03 11:55:38 vijoc

好的，谢谢，但有什么方法可以直接从缓存中访问图像吗？所以我不必把这份工作交给浏览器，但是我可以检查一下，例如'030.png'是否已经存在于缓存中？谢谢你的帮助。 – FatTony

那么这里有实验性的[Cache API]（https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage），尽管你不能真正依靠它来进行生产使用，因为它是*实验*。除此之外，据我所知，没有API可以访问缓存。你可以自己做一些自定义的缓存层，但如果服务器配置正确，那么这对浏览器本身已经处理的东西来说似乎有些过分。 – vijoc

好吧，既然这不是一个真正的程序，但是更多的是由我自己做的，我会把它留给浏览器，坦克来帮助你。 – FatTony

Javascript：如何检查图像是否已被缓存

回答

相关问题