让" ?${new Date().getTime()} "如何在 JS 中更新图像



我看了一个教程,他们在教程中展示了将?${new Date().getTime()}附加到image标记中src属性的值,可以用新图像更新当前图像。

我遇到了这个问题,这个问题的第一个答案采用了同样的技巧。

有人能向我解释一下这种特殊技术背后的原理吗。谢谢

最简单的解释是浏览器(通常是服务器(将在内存中缓存项目以减少页面加载时间。因此,如果有十几个页面都引用了/images/logo.png,则会下载一次图像并进行存储,以便在每个页面上重复使用。高效,对吧?

无论如何,有时图像会发生变化,而你不希望这种情况发生,所以你要做的就是更改文件名。例如,/images/logo.png?15/images/logo.png?16/images/logo.png?17等。浏览器不再尝试使用缓存的图像,因为查询实际上不同。

您所包含的代码片段只是将当前时间包含在文件名中,以使其具有唯一性。

根据后端逻辑,不同的查询参数可能会导致服务器提供不同的图像。通常情况并非如此-在许多设置中,使用不同的查询参数请求相同的路径会得到相同的图像作为回报,但情况并非总是如此。

如果浏览器看到缓存中已经存在图像的图像URL,它将不会再次下载该图像,而是从浏览器缓存中获取该图像。但是,如果将src更改为缓存中的而非,它将向服务器发出另一个请求。如果服务器在初始页面加载和src更改之间更改了该端点的映像,则服务器上的新映像将被下载并显示在客户端上。

new Date().getTime()只是一种附加字符串的方式,该字符串在浏览器缓存中肯定还不存在。

最新更新