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

How to prevent the browser using a cached image?

本文关键字：缓存图像何防止浏览器更新时间：2023-09-26

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

在Firefox中，图像似乎是缓存的，所以每次我试图获得一个新的"帧"时，它都会显示启动脚本后获得的第一个帧。

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

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

在保持这种方法的同时，是否有变通方法？有更好的方法吗（请记住，我无法控制来源——这是观看视频的唯一方法！）。

我的脚本（准备好了-非常匆忙）

只需在图像url的末尾添加一个时间戳或随机数。这将绕过缓存。类似于：

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

编辑-您到底尝试了哪些方法？脚本使用image.src加载图像。你试过XHR吗？如果您有，请张贴该代码。

据我所知，你有两个选择：

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

2） XHR-虽然我希望XHR的行为与您目前的方法类似，但不能保证它会这样做。因此，至少值得调查一下。

向源地址添加缓存破坏参数：

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