使用javascript强制图像缓存
我正在尝试克隆随机生成的图像。 虽然我使用完全相同的URL，但是加载了不同的图像。 （在chrome和firefox中测试过）
我无法更改图像服务器，所以我正在寻找一个纯粹的javascript / jQuery解决方案。
你如何强制浏览器重用第一张图片？
火狐： 
铬： 
自己试试（也许你需要多次重装才能看到它）
代码： http ： //jsfiddle.net/TRUbK/
$("![]()
").attr('src', img_src) $("").css('background', background) $("#source").clone() 演示： http ： //jsfiddle.net/TRUbK/embedded/result/
如果图像服务器不是您的图像服务器，则无法更改图像服务器，但您可以在自己的服务器上轻松编写一些内容来为您处理。
首先用你选择的服务器端语言（PHP，ASP.NET，无论如何）写一些东西：
- 点击http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes并下载它。 您可以通过两种方式生成密钥。 要么得到整个事物的哈希值（MD5应该没问题，这不是与安全相关的用途，所以担心它现在太弱了不适用）。 或者获得图像的大小 – 后者可能有一些重复，但生成速度更快。
- 如果图像尚未存储，请将其保存在使用该键作为其文件名的一部分的位置，并将内容类型另存为另一部分（如果有JPEG和PNG的混合）
- 使用下一阶段的URI响应XML或JSON响应。
在您的客户端代码中，您通过XmlHttpRequest命中该URI以获取要与您的图像一起使用的URI。 如果你想要一个新的随机URI，再次点击第一个URI，如果你想要两个或多个地方的相同图像，使用相同的结果。
该URI会遇到类似http://yourserver/storedRandImage?id=XXX ，其中XXX是密钥（散列或大小如上所述）。 其处理程序查找存储的映像副本，并使用正确的内容类型将文件发送到响应流中。
这在技术上非常简单，但可能的问题是合法的，因为您将图像的副本存储在另一台服务器上，您可能不再符合与发送随机图像的服务协议的条款。
从随机图像生成器脚本发送的标头包括Cache-Control: max-age=0声明，它实质上告诉浏览器不要缓存图像。
如果希望缓存结果，则需要修改图像生成器脚本/服务器以发送正确的缓存标头。
你还需要确保URL保持不变（我没有看到那个方面，因为传递了大量的参数）。
您可以尝试保存图像的base64表示。
将图像加载到隐藏的div / canvas中，然后在base64中进行转换。 （我不确定是否可以隐藏canvas，也不确定是否可以使用html4标签来保存img）现在您可以将“stringified”图像存储在cookie中，并无限次地使用它…
似乎有两种解决方法：
- 如果您使用Canvas方法，请查看是否可以将图像加载到Canvas本身，以便您可以直接操作图像数据，而不是为图像发出第二个http请求。 您可以将图像数据直接提供到第二个canvas上。
- 如果您要构建代理，可以让代理删除No-Cache指令，以便浏览器的后续请求使用缓存（此处不保证 – 取决于浏览器/用户设置）。
首先，您可以“强制”网络上的任何内容。 如果你需要强迫事物，那么Web开发对你来说是错误的媒介。
你可以尝试的是使用canvas元素来复制图像。 有关示例，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 。
告诉它停止获取随机图像，当我添加第三个替换调用时，似乎按照您想要的方式工作：
// Get the canvas element. var background = ($("#test").css('background-image')), img_src = background.replace(/^.+\('?"?/, '').replace(/'?"?\).*$/, '').replace(/&fromrandomrandomizer=yes/,'')
尝试：
var myImg = new Image(); myImg.src = img_src;
然后将“myImg”附加到您想要的位置：
$(document).append(myImg);
我用你的小提琴脚本做了这个，每次都得到相同的图像
#test { background:url(http://a.random-image.net.nyud.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes); width: 150px; height: 150px;
}
请注意域名后面的.nyud.net。