卡在浏览器缓存的图像/CSS

Question

我的网页上有一些图片，我们会从后端进行更新。但是那些没有直接反映的图像意味着用户需要执行 ctr+F5。这意味着客户端的浏览器缓存了该图像。有没有办法在更新后重新加载更新的图像、JS、CSS？

我的尝试。

ETag

这对我不起作用。

在我的页眉中添加了以下标签

<meta http-equiv="Expires" CONTENT="-1" ></meta>

<meta http-equiv="cache-control" content="no-cache"></meta>

<meta http-equiv="Pragma" CONTENT="no-cache"></meta>

但结果相同。

在 Apache 中添加了以下配置

ExpiresActive on
ExpiresByType application/javascript "access plus 0 seconds"
ExpiresByType image/jpg "access plus 0 seconds"
ExpiresByType image/jpeg "access plus 0 seconds"
ExpiresByType image/gif "access plus 0 seconds"
ExpiresByType image/png "access plus 0 seconds"
ExpiresByType text/css "access plus 0 seconds"

以上配置适用于 JS。但面临图像问题。 我不能在 url/图像名称的末尾添加任何令牌号或版本号，这也需要太多的代码更改和测试。 请指导我是否有任何其他集中方式来限制图像、css 缓存

提前致谢。

Answer 1

您可以使用javascript更改任何图像的src，这将导致名称更改并强制浏览器重新加载。

例子：

document.getElementById('myimg').src = document.getElementById('myimg').src + '?r=' + Math.random();

不是最干净的解决方案，但您的选择似乎有限。

要使用 jQuery 重新加载整个页面的图像，您可以尝试：

$('img').each(function() {
    $(this).attr('src', $(this).attr('src') + '?r=' + Math.random())
});

通过修改初始选择器，您可以将其限制在一个区域内，这样您就不会最终重新加载所有内容。这不会影响由 css 样式指定的图像。