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 / image名称的末尾添加任何令牌编号或版本号，这需要进行太多的代码更改和测试。请指导我是否有任何其他集中方式来限制图像，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样式指定的图像。

坚持使用浏览器缓存的Images / CSS

1 个答案: