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

Question

我刚开始学习一点JavaScript，想知道是否有方法可以检查图像是否已经加载到缓存中。

在我的脚本中，我从另一个网页加载一些随机图像并显示它们。当同一张图片第二次被显示时，脚本不会使用已经加载的图片，而是再次加载相同的图片，这样我的缓存中就有两个相同的图片。

现在我想要检查图像是否已经存储在缓存中，如果是，则使用缓存的图像，而不是重新加载它。

我的代码：

<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列中看到的那样，这些图片已经从我的缓存中加载。

- Tim Schmidt

---

https://dev59.com/lnE95IYBdhLWcg3wHqSl - Robert

浏览器在内部处理此事...您无法控制它，也无法访问缓存。 - charlietfl

Answer 1

缓存（在这个上下文中）的处理方式是由浏览器通过一系列头部信息与服务器协商来告诉服务器：“我已经有了这个资源的版本”，然后服务器可以回应：“好的，这仍然有效，不需要下载任何新的内容”。因此您不必担心JavaScript端的缓存问题，而应确保在服务器端设置正确的Cache-Control头部信息。对于您选择的服务器/框架，可能已经有了关于如何设置缓存的问题/答案。请参考Cache-Control头部的相关资料。

- vijoc

---

好的，谢谢。但是有没有办法直接从缓存中访问图像？这样我就不必把这个任务交给浏览器了，而是可以直接检查例如030.png是否已经存在于缓存中？感谢您的帮助。 - Tim Schmidt

好吧，有实验性的缓存 API，但是您不能真正依赖它进行生产使用，因为它是实验性的。除此之外，据我所知，没有API可以访问缓存。您可以自己做一些自定义缓存层，但对于已经由浏览器本地处理（在正确的服务器配置下）的东西来说，这似乎过于繁琐。 - vijoc

好的，既然这不是一个真正的程序，而只是我自己的一些实验，我就让它留给浏览器了，谢谢你的帮助。 - Tim Schmidt