用JavaScript力的图像缓存(Force image caching with javascr

我试图克隆这是随机生成的图像。虽然我使用的是完全相同的网址不同的图像负载。（在铬和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，等等）是：

点击http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes和下载它。您生成两种方式一个一个关键。要么得到的整个事情的哈希（MD5应该是罚款，这不是一个安全相关的应用，从而担心它太薄弱，这些天不适用）。或获取图像的大小 - 后者可能有一些重复，但生产速度更快。
如果图像没有存储，使用该密钥作为其文件名的一部分，和该内容 - 类型作为另一部分将其保存在一个位置（在情况下有JPEG文件和PNG图像的混合物）
与该URI XML或JSON响应为下一阶段作出响应。

在您的客户端代码，你打的URI通过XMLHttpRequest来获得URI处理图像使用。如果你想要一个新的随机一个，再次命中，首先URI，如果你想为两个或两个以上的地方相同的图像，使用相同的结果。

该URI击中类似http://yourserver/storedRandImage?id=XXX其中XXX是键（散列或大小如上决定）。造成这种情况的处理程序中查找图像存储的副本，并将该文件向下响应流，用正确的内容类型。

这一切很容易在技术上，而是可能的问题是一个法律问题，因为你存储在另一台服务器上的图像的副本，你可能不再与该服务发送的随机图像的协议条款之内。

Answer 2:

标头从您的随机图像生成器脚本发送包括Cache-Control: max-age=0宣言，该宣言在本质上告诉浏览器不缓存图像。

您需要修改您的图像生成脚本/服务器，如果您想要的结果被缓存发送正确的缓存头。

您还需要确保该网址保持不变（我没看那个方面，因为有万吨参数的传递）。

Answer 3:

您可以尝试保存图像的Base64表示。

加载图像中的隐藏DIV /月，然后将其转换为Base64。（我不知道，如果一个画布可以隐藏，也不如果有可能convery使用HTML4标记IMG）您现在可以存储在cookie中的“字符串化”的形象，并用它无限次...

Answer 4:

似乎有两种解决方法：

如果用帆布方法去，看看你是否可以得到图像加载到Canvas本身，以便您可以处理图像数据，而不是直接使该图像的第二个HTTP请求。您可以直接喂图像数据到第二画布。
如果你要建立一个代理，你可以有代理删除no-cache指令，使您的浏览器后续请求使用高速缓存（这里没有保障 - 依赖于浏览器/用户设定）。

Answer 5:

首先，你可以“强制”在网络上的任何东西。如果您需要强制的东西，那么Web开发是你错误的媒体。

你可以尝试，是用canvas元素复制的图像。见https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images的例子。

Answer 6:

告诉它停下来得到一个随机的形象，似乎工作您想要的方式，当我加入这个第三更换电话：

// Get the canvas element.
var background = ($("#test").css('background-image')),
img_src = background.replace(/^.+\('?"?/, '').replace(/'?"?\).*$/, '').replace(/&fromrandomrandomizer=yes/,'')

Answer 7:

尝试：

var myImg = new Image();
myImg.src = img_src;

然后“myImg”附加到你想去的地方：

$(document).append(myImg);

Answer 8:

我这样做是与你的提琴手脚本，每次得到了相同的图像

#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。

文章来源: Force image caching with javascript