使用javascript强制图像缓存

Question

我试图克隆随机生成的图像.虽然我使用完全相同的URL,但是加载了不同的图像.(在chrome和firefox中测试过)

我无法更改图像服务器,所以我正在寻找一个纯粹的javascript/jQuery解决方案.

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

火狐:

铬:

自己尝试一下(也许你需要多次重装才能看到它)

代码:http: //jsfiddle.net/TRUbK/

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

演示:http: //jsfiddle.net/TRUbK/embedded/result/

Answer 1

如果图像服务器不是您的图像服务器,则无法更改图像服务器,但您可以在自己的服务器上轻松编写一些内容来为您处理.

首先用你选择的服务器端语言(PHP,ASP.NET,等等)写一些东西:

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

在您的客户端代码中,您通过XmlHttpRequest命中该URI以获取要与您的图像一起使用的URI.如果你想要一个新的随机URI,再次点击第一个URI,如果你想要两个或多个地方的相同图像,使用相同的结果.

该URI会遇到类似http://yourserver/storedRandImage?id=XXXXXX的关键字(哈希或大小如上所述).其处理程序查找存储的映像副本,并使用正确的内容类型将文件发送到响应流中.

这在技术上非常简单,但可能的问题是合法的,因为您将图像的副本存储在另一台服务器上,您可能不再符合与发送随机图像的服务协议的条款.