Javascript 从浏览器缓存中删除特定图像

我的应用程序看起来有点像carousal，用户通过点击相关按钮相应地标记图像，然后加载下一个图像

为了让这个应用程序运行得更快，我一次缓存10个图像。当用户在第8张图片时，我会提前缓存另外10张图片（第11张到第20张）。当它是18时，我缓存下一个10（21到30），以此类推。对于缓存，我在

For

循环中执行以下操作：

var img = new Image();
img.src = 'https://some-site/some-image.jpg'; // different image URL each time, of course

现在的问题是，当缓存中有大约500个图像时，应用程序的速度会变慢。我对700多张图片进行了测试，该应用程序的速度非常慢

有没有一种方法可以在用户标记图像后将其从浏览器缓存中删除

---

更新1:我的代码的相关部分：

    for (var i = start, l=start+10; i < l; i++) {

        var img = new Image();

        img.onload = function() {
            console.log('images loaded in cache');
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        };

        list.push(img);

        img.src = 'https://xxx/xxx/' + screenshotFilenames[i];

    }

for（变量i=start，l=start+10；i

这里有几个问题

首先，磁盘上的浏览器缓存不能被JavaScript更改。磁盘上的缓存将随着已加载的映像数量的增长而增长，这是无法阻止的

您可以控制的是浏览器在页面中分配的内存量。这取决于图像的引用数量。我不确定你是否使用了与你帖子中所示相同的设计方案，但基本上你已经在全球范围内展示了一幅图像

这需要改变。保存图像的变量的生存期需要存在较短的时间。这样它就会失去作用域。一旦失去作用域，它将成为垃圾收集的候选对象。但是，如果其范围仍然存在，则不会收集

垃圾收集将递归地迭代存储在页面上的执行上下文集，并检查其可变环境是否包含合格的候选对象。请注意，全局范围中的所有内容都在词法环境中，因此，在页面卸载之前，永远不会进行垃圾收集

---

因此，您需要将缓存或“活动”图像的临时数组移动到某个可变环境中，并确保一旦元素被放置在页面上或队列中，它就会失去作用域。

在循环过程中，您是否尝试将

img

变量存储在数组中，并执行

delete

到要删除的变量？@WillP.-这几乎可以奏效：）@WillP。在我的代码中，我已经在从数组中删除加载后的图像。让我在上面的问题中列出代码的相关部分。@WillP。好了，我已经在移除阵列了。请参阅我问题中的更新。for循环不会创建执行上下文。例如：

For（var i=0；i<5；i++）{var img=“test”}警报（img）将显示“test”，因为变量从循环外部提升到当前执行上下文的顶部。明白了！如果我用生命就能解决吗<代码>（函数（）{/*for loop here*/}）（）

这可能会有所帮助，它肯定会防止

img

变量泄漏太多。如果没有更多的包含代码来显示作用域，很难判断。好的，我现在已经添加了IIFE。但正如您在我的代码中看到的，我已经从数组中删除了图像。不过，我没有看到使用Javascript将其从缓存中删除的方法。看起来Javascript无法更改缓存。