强制硬重载

Question

我目前正在尝试创建一个简单的测试，通过渲染图像来测试客户端 PC 的速度。问题出在 Safari 等浏览器和 Chrome 图像以某种方式保存以允许快速重新加载速度。例如当使用下面的代码时

var speed = document.getElementById('speed');
var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
    var stopTime = new Date().getTime();
    var loadtime = Math.round((stopTime - startTime) / 100);
}
img.src = "testImage.jpg";

变量loadtime一开始是8，刷新后是0。我的猜测是 Safari 保存图像以立即加载它。在 Chrome 上，这是同样的问题，除非我进行硬重新加载。我试过放置这些 meta 标签，但没有成功。

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

我也试过了

location.reload(true);

如建议的那样here，但它似乎并不能解决问题。

是否可以在未经客户同意或未选择的情况下强制硬重新加载？还是某种安全侵权行为？

Answer 1

您可以在 url 的末尾添加一个无害的查询参数来破坏浏览器的缓存：

img.src="testImage.jpg?noop=<incrementing_number_here>"

Answer 2

设置元标记和重新加载HTML页面不会影响图像的缓存。例如，如果您想避免缓存图像，请尝试每次都附加一个随机查询参数。

img.src = "testImage.jpg?q=" + Math.random().toString(16).slice(2);

强制硬重载

Force Hard Reload

html

javascript

reload