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

Answer 1

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