如何防止浏览器使用缓存的图像？答案

【问题标题】：How to prevent the browser using a cached image?如何防止浏览器使用缓存的图像？
【发布时间】：2014-04-09 08:52:19
【问题描述】：

我正在 HTML 文档中创建一个伪视频，方法是每秒 30 次更新 <img> 元素的源，并使用我从 LAN 上的 URL（IP 安全摄像头）获取的新“帧”。

在 Firefox 中，图像似乎被缓存了，所以每次我尝试获取新的“框架”时，它都会显示启动脚本后得到的第一个。

在 WebKit 浏览器（Chrome 和 Safari）中，我正在下载的图像没有被缓存，因此每隔几毫秒“视频”就会更新一次，看起来就像一个真实的视频。这就是我在 Firefox 中想要的。

我无法控制视频的来源。 我无法添加 GET 参数来强制重新下载，因为当我尝试发送回给我的图像时返回为空（服务器必须具有特定设置以禁用它们以确保安全或其他原因） .

在保留此方法的同时是否有解决方法？有没有更好的方法（请记住，我无法控制源 - 这是观看视频的唯一方法！）。

My script（做好准备——很匆忙）

【问题讨论】：

设置一个远程获取图片的php脚本，然后使用headers来防止浏览器缓存图片。这可能并不总是有效，但似乎大部分时间都有效。
@DJDavid98 我考虑过，但这不会花两倍的时间，给它带来显着的性能影响吗？我会尝试，但这应该是一个 5 分钟的工作。
This might be a good starting point。这些是您需要使用 PHP 修改的标头。
如果服务器没有发送有用的缓存指令并且不会返回带有随机查询字符串的图像，那么前端就无法强制它返回一个新的图像。您是否可以使用另一台服务器来获取图像的新版本并使用不同的过期标头将它们发回？
@Barney 如果我同意 David 的建议，那么我将使用运行我的脚本的同一网络服务器来获取“新”帧。

【解决方案1】：

只需在图片网址的末尾添加时间戳或随机数即可。这将绕过缓存。比如：

url += 'c'+ ~~(Math.random() * 10000);

EDIT - 您具体尝试过哪些方法？您的脚本使用 image.src 来加载图像。你试过 XHR 吗？如果有，请发布该代码。

据我所知，您有两种选择：

1) 更改标头 - 可以通过中间服务器完成。如果你有一个本地代理或者可以添加一个，你可能会用它来篡改标头。无论哪种方式都有点过分。

2) XHR - 虽然我希望 XHR 的行为类似于您目前的方法，但不能保证它会。因此，至少值得调查。

【讨论】：

我不能。这是一个内部项目，源是局域网上的 IP 摄像机。我投了反对票，因为我清楚地解释了这一点（并在你回答后加粗了） - 我无法控制来源，任何使用 GET 参数的尝试都失败了。
我很感激。除了根据您的脚本使用 Image 对象之外，我最初更新了我的答案，询问您已经尝试过什么。这是为了排除人为错误并更好地了解您拥有什么，以及没有尝试过什么。我再次更新了它，希望这次更清楚一点。
我在阅读您的答案时没有看到编辑。我会在某个时候尝试 XHR，但我同意，我认为它的行为会相同。

【解决方案2】：

在源地址中添加缓存清除参数：

container.src = camerasrc + '/cgi-bin/video.jpg' + '?bust=' + (new Date()).getTime();

【讨论】：

I cannot add a GET parameter to force a re-download because the image that is sent back to me is returned empty when I try it (the server must have specific settings to disable them for security or something). - 操作