36 javascript caching replace image
我知道有很多方法可以防止图像缓存(例如通过META标签),以及一些很好的技巧来确保每个页面加载时显示当前版本的图像(例如image.jpg？x = timestamp ),有没有办法在浏览器缓存中实际清除或替换图像,以便上述两种方法都不是必需的？
例如,假设页面上有100个图像,这些图像被命名为"01.jpg","02.jpg","03.jpg"等.如果图像"42.jpg"被替换,则是有没有办法在缓存中替换它,以便"42.jpg"将在连续页面加载时自动显示新图像？我不能使用META标记方法,因为我需要永久性地将ISN"T替换为保持缓存,并且我不能使用timestamp方法,因为我不希望每次页面都重新加载所有图像负载.
我绞尽脑汁在互联网上寻找一种方法(最好是通过javascript),但没有运气.有什么建议？
Gre*_*reg 51
If you're writing the page dynamically, you can add the last-modified timestamp to the URL:
<img src="image.jpg?lastmod=12345678" ...
Kor*_*nel 13
<meta>绝对无关紧要.实际上,您根本不应该尝试使用它来控制缓存(当任何内容读取文档的内容时,它已经被缓存).
在HTTP中,每个URL都是独立的.无论您对HTML文档执行什么操作,它都不适用于图像.
要控制缓存,您可以在每次内容更改时更改URL.如果您不时更新图像,请允许它们永久缓存并为新图像使用新文件名(带有版本,哈希或日期) - 这是长期文件的最佳解决方案.
如果您的图像经常变化(每隔几分钟,甚至每次请求),则发送Cache-control: no-cache或Cache-control: max-age=xx其中xx是图像"新鲜"的秒数.
短期文件的随机URL是个坏主意.它会使用无用的文件污染缓存,并强制更快地清除有用的文件.
如果你有Apache和/ mod_headers或mod_expires然后.htaccess用适当的规则创建文件.
<Files ~ "-nocache\.jpg">
Header set Cache-control "no-cache"
</Files>
以上将使*-nocache.jpg文件不可缓存.
您还可以通过PHP脚本提供图像(默认情况下它们具有可靠的可配置性;)
小智 10
像这样添加图片网址
"image1.jpg？" + DateTime.Now.ToString("ddMMyyyyhhmmsstt");
只需在查询字符串中添加随机字符串即可
谢谢
Raju Jetla
Doi*_*oin 10
相反的是一些其他的答案说,有IS用于客户端的方式JavaScript来替换缓存图像.诀窍是创建一个隐藏<iframe>,将其src属性设置为图像URL,等待它加载,然后通过调用强制重新加载它location.reload(true).这将更新图像的缓存副本.然后,您可以替换<img>页面上的元素(或重新加载页面)以查看图像的更新版本.
(小警告:如果更新单个<img>元素,并且如果有多个图像已更新,则必须清除或删除它们全部,然后替换或重置它们.如果您逐个执行此操作,某些浏览器会从其他标签复制图像的内存版本,结果是您可能看不到更新的图像,尽管它位于缓存中).
我在这里发布了一些代码来进行这种更新.
您可以在图像上附加一个随机数，就像给它一个新版本一样。我已经实现了类似的逻辑，并且运行良好。
<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$('#imgID').attr("src", imgSrc);
})
</script>
使用 ?x=timestamp 技巧的原因是因为这是在每个图像的基础上执行此操作的唯一方法。或者动态生成图像名称并指向输出图像的应用程序。
我建议您在服务器端弄清楚图像是否已更改/更新，如果是，则使用 ?x=timestamp 技巧输出标记以强制使用新图像。