javascript - 使用javascript强制图像缓存

我正在尝试克隆随机生成的图像。虽然我使用的是完全相同的 url，但加载的是不同的图像。 (在 chrome 和 firefox 中测试)

我无法更改图像服务器，因此我正在寻找纯 javascript/jQuery 解决方案。

如何强制浏览器重复使用第一张图片？

火狐: Firefox Demo

Chrome : Chrome Demo

自己试试看(可能要重载几次才能看到)

$("<img/>").attr('src', img_src)
$("<div/>").css('background', background)
$("#source").clone()

最佳答案

如果图像服务器不是您的，您将无法更改它，但您可以在自己的服务器上简单地编写一些东西来为您处理。

首先用您选择的服务器端语言(PHP、ASP.NET 等)编写一些内容:

点击 http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes并下载它。您可以通过以下两种方式之一生成 key 。要么得到整个东西的哈希值(MD5 应该没问题，它不是与安全相关的用途，所以担心它现在太弱了不适用)。或者获取图像的大小 - 后者可能有一些重复，但生成速度更快。
如果图像尚未存储，请使用该键作为其文件名的一部分将其保存在一个位置，并将内容类型作为另一部分(以防混合使用 JPEG 和 PNG)
使用带有下一阶段 URI 的 XML 或 JSON 响应进行响应。

在您的客户端代码中，您通过 XmlHttpRequest 访问该 URI 以获取用于您的图像的 URI。如果您想要一个新的随机图像，请再次点击第一个 URI，如果您想要两个或更多地方的相同图像，请使用相同的结果。

该 URI 命中类似 http://yourserver/storedRandImage?id=XXX 的内容，其中 XXX 是键(哈希或大小由上面决定)。其处理程序会查找存储的图像副本，并使用正确的内容类型将文件发送到响应流中。

这在技术上真的很容易，但可能的问题是法律问题，因为您将图像的副本存储在另一台服务器上，您可能不再符合与发送随机图像的服务的协议(protocol)条款.

关于javascript - 使用javascript强制图像缓存，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11907568/