html图片地址添加随机数后缀防止微信浏览器缓存

2019-10-1911:41:28 发表评论 546

html图片地址添加随机数后缀防止微信浏览器缓存,为了防止缓存,如何使用随机数处理图片,是浏览器改变对图片路径的处理,在我们日常开发的,由其是单页的html页面,在我们上传更新了图片以后,在微信内置浏览器和大部分浏览器中打开的时候,发现还显示的是之前的图片,但是在IOS端是正常的,这就是微信内置浏览器缓存的坑。

因为图片在代码里是固定的图片地址和图片名:如 : upload/111.jpg

那么每次更新如果图片名不换的话,用户访问的时候,浏览器就会调用缓存里的111.jpg文件,所以更新了以后再访问就没有变化,网上本人寻找了好多方法根本没有用,最后只有给图片加时间戳或随机数后缀最终实现了,微信浏览器更新图片立即显示。 如果每次访问页面 upload/111.jpg?t=xdfgssdg

图片的后缀都不一样,浏览器就会认为图片更新了,就会从服务器端重新获取。

那么 html 怎么 利用js加载随机数 并赋值给 img src ?

亲测可用的方法:
<body>
<img id="foobar"/>
</body>
<script>
document.getElementById("foobar").setAttribute("src","这里替换成你的图片所在的地址即可?param="+ Math.floor(Math.random()*1000000000))
</script>
html图片地址添加随机数后缀防止微信浏览器缓存

失败方法:  头部添加  meta  经测试无用
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

 

发表评论

您必须登录才能发表评论!