html里多张图片自动刷新,在同一个url中使用新的刷新图像

对于如何做到这一点，我已经看到了很多不同的答案，所以我想在这里总结它们(加上我自己发明的第四种方法)：

(1)向URL添加唯一的破坏缓存的查询参数，例如：newImage.src = "image.jpg?t=" + new Date().getTime();

优点：100%可靠，快速，易于理解和实施。

缺点：完全绕过缓存，这意味着每当映像出现时都会出现不必要的延迟和带宽使用。不不同观点之间的变化。将有可能填补浏览器缓存(和任何中间缓存)与许多，许多副本，完全相同的图像！此外，还需要修改图像URL。

何时使用：当图像不断变化时使用，例如用于实时网络摄像头提要。如果你用这个方法，一定要为自己的形象服务Cache-control: no-cachehttp标头！(通常可以使用.htaccess文件进行设置)。否则，您将逐步填补缓存与旧版本的图像！

(2)将查询参数添加到仅在文件发生更改的URL中，例如：echo '';

(这是PHP服务器端代码，但这里最重要的一点是，a？m=[提交最后修改的时间]查询字符串被追加到文件名)。

优点：100%可靠，快速，易于理解和实施，和完美地保留了缓存的优势。

缺点：需要修改图像URL。另外，服务器还需要做更多的工作-它必须访问上次修改的文件。此外，还需要服务器端的信息，因此不适合纯客户端的解决方案来检查刷新的映像。

何时使用：当您想要缓存图像时，但可能需要在服务器端不时更新它们，而不更改文件名本身。当您可以轻松地确保将正确的查询字符串添加到HTML中的每个图像实例时。

(3)用标题服务您的图像Cache-control: max-age=0, must-revalidate，并添加一个唯一的模缓存-破坏URL的片段标识符，例如：newImage.src = "image.jpg#" + new Date().getTime();

这里的想法是，缓存控制头将图像放置在浏览器缓存中，但立即将其标记为陈旧的图像，因此每次重新显示图像时，浏览器都必须与服务器检查它们是否已更改。这确保浏览器的http缓存始终返回图像的最新副本。但是，如果有图像，浏览器通常会重用内存中的图像副本，而在这种情况下甚至不检查它们的HTTP缓存。为了防止这种情况，使用了片段标识符：内存中图像的比较。src其中包括片段标识符，但在查询HTTP缓存之前，它会被剥离。image.jpg#A和image.jpg#B可能都显示在image.jpg浏览器HTTP缓存中的条目，但是image.jpg#B将不会使用内存中保留的图像数据显示image.jpg#A最后一次显示)。

优点：正确使用HTTP缓存机制，并在没有更改的情况下使用缓存的图像。适用于被添加到静态图像URL的查询字符串阻塞的服务器(因为服务器从来没有看到片段标识符-它们仅供浏览器自己使用)。

缺点：对于带有片段标识符的图像，浏览器的行为有些可疑(或者至少文档不清楚)(然而，我已经在FF 27、Chrome 33和IE11中成功地测试了这一点)。是否仍然为每个图像视图向服务器发送重新验证请求，如果图像很少更改和/或延迟是一个大问题(因为即使缓存的映像仍然良好，也需要等待重新验证响应)，这可能会导致过度死亡。需要修改图像URL。

何时使用：当图像可能经常更改时使用，或者需要客户端在没有服务器端脚本参与的情况下间歇刷新，但仍然需要缓存的优点。例如，轮询一个实时摄像头，每隔几分钟不定期地更新一张图像。或者，如果服务器不允许静态图像URL上的查询字符串，则使用而不是(1)或(2)。

(4)使用Javascript强制刷新特定图像，首先将其加载到隐藏的然后打电话location.reload(true)在IFRAME上contentWindow.

这些步骤是：将要刷新的图像加载到隐藏的iframe中。这只是一个设置步骤-如果需要的话，可以提前很长时间完成实际刷新。这甚至不重要，如果图像未能加载在这个阶段！

完成后，将页面上或任何DOM节点(甚至是存储在javascript变量中的页外节点)中的图像的所有副本空白。这是必要的，因为浏览器可能会在内存中显示陈旧副本的图像(尤其是IE11)：您需要确保所有内存中在刷新HTTP缓存之前，将清除副本。如果其他javascript代码异步运行，您可能还需要防止该代码同时创建待刷新映像的新副本。

打电话iframe.contentWindow.location.reload(true)..这个true强制缓存旁路，直接从服务器重新加载并覆盖现有的缓存副本。

一旦完成Re-加载，恢复空白图像。他们现在应该显示来自服务器的新版本！

对于相同域的图像，您可以直接将图像加载到iframe中。对于跨域图像，必须加载HTML页面。从你的领域中包含图像的标记，否则在尝试调用时会出现“拒绝访问”错误。iframe.contentWindow.reload(...).

优点：就像Image.reload()函数一样祝愿，希望多姆有！允许图像正常缓存(即使是在未来的终止日期(如果您想要的话)，从而避免频繁的重新验证)。允许您仅使用客户端代码刷新特定的映像，而无需更改当前页或任何其他页面上的该图像的URL。

缺点：依赖于Javascript。并不是100%保证在每个浏览器中都能正常工作(不过，我已经在FF 27、Chrome 33和IE 11上成功地测试了这一点)。与其他方法相比非常复杂。

何时使用：当您有一个基本静态的图像集合，您希望缓存，但您仍然需要能够更新他们