[英]Force image caching with javascript
我试图克隆随机生成的图像。 虽然我使用完全相同的URL,但是加载了不同的图像。 (在chrome和firefox中测试过)
我无法更改图像服务器,所以我正在寻找一个纯粹的javascript / jQuery解决方案。
你如何强制浏览器重用第一张图片?
火狐:
铬:
自己尝试一下(也许你需要多次重装才能看到它)
代码: http : //jsfiddle.net/TRUbK/
$("<img/>").attr('src', img_src)
$("<div/>").css('background', background)
$("#source").clone()
如果图像服务器不是您的图像服务器,则无法更改图像服务器,但您可以在自己的服务器上轻松编写一些内容来为您处理。
首先用你选择的服务器端语言(PHP,ASP.NET,等等)写一些东西:
在您的客户端代码中,您通过XmlHttpRequest命中该URI以获取要与您的图像一起使用的URI。 如果你想要一个新的随机URI,再次点击第一个URI,如果你想要两个或多个地方的相同图像,使用相同的结果。
该URI会遇到类似http://yourserver/storedRandImage?id=XXX
,其中XXX是键(哈希或大小如上所述)。 其处理程序查找存储的映像副本,并使用正确的内容类型将文件发送到响应流中。
这在技术上非常简单,但可能的问题是合法的,因为您将图像的副本存储在另一台服务器上,您可能不再符合与发送随机图像的服务协议的条款。
从随机图像生成器脚本发送的标头包括Cache-Control: max-age=0
声明,它实质上是告诉浏览器不要缓存图像。
如果希望缓存结果,则需要修改图像生成器脚本/服务器以发送正确的缓存标头。
您还需要确保URL保持不变(我没有看到那个方面,因为传递了大量的参数)。
首先,您可以“强制”网络上的任何内容。 如果你需要强迫事物,那么Web开发对你来说是错误的媒介。
你可以尝试的是使用canvas
元素来复制图像。 有关示例,请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 。
您可以尝试保存图像的base64表示。
将图像加载到隐藏的div / canvas中,然后在base64中进行转换。 (我不确定是否可以隐藏画布,也不确定是否可以使用html4标签来保存img)现在您可以将“字符串化”图像存储在cookie中,并无限次地使用它...
似乎有两种解决方法:
告诉它停止获取随机图像,当我添加第三个替换调用时,似乎按照您想要的方式工作:
// 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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.