这是一个创建于 1059 天前的主题，其中的信息可能已经有所发展或是发生改变。
HTML 如何让浏览器缓存图片重新加载
轮播效果已经实现了，pic2-pic4 需要定时更新图片，文件名不变，所以需要绕过浏览器的缓存问题，网上的方法就是给图片结尾时间或随机数，我用了+Math.random() 加随机数，然后浏览器缓存中也已经按定时加载了带有随机数结尾的图片
pic2.png?t=0.04027631228529205 pic2.png?t=0.07900295045139183 pic3.png?t=0.9565799922757663 ...
但浏览器页面上显示的轮播图还是初始页加载的图，没有变化，F5 刷新后，也只是将缓存中的随机图片文件给清理了，初始页图片都还在缓存里；只有 CTL+F5 才会重新加载；
<meta http-equiv="Refresh" cOntent="30" /> # 也不起作用, F5 的效果 <!-- 轮播图容器 --> <div id="roll"> <ul class=""imglist> <!-- 图片容器 --> <li> <img src="http://www.v2ex.com/pic1.png" id="pic1"/> </li> <li> <img src="http://www.v2ex.com/pic2.png" id="pic2"/> </li> <li> <img src="http://www.v2ex.com/pic3.png" id="pic3"/> </li> <li> <img src="http://www.v2ex.com/pic4.png" id="pic4"/> </li> </ul> </div> <script> setInterval(function() { document.getElementById("pic2").innerHTML='<img src="http://www.v2ex.com/pic2.png?t=' +Math.random() + '" />'; document.getElementById("pic3").innerHTML='<img src="http://www.v2ex.com/pic3.png?t=' +Math.random() + '" />'; document.getElementById("pic4").innerHTML='<img src="http://www.v2ex.com/pic4.png?t=' +Math.random() + '" />'; }, 6000); </script> 我可能需要解决把新生成的带有随机数结尾的图片带
的图片容器中
请高人帮忙看一下， 给一下具体修改方法，谢谢！谢谢！
等待...
 | 1 lambdaq 2022-12-02 21:27:33 +08:00 定时更新难道不应该写一个新的图片 url 嘛。。。 |
 | 2 cpstar 2022-12-02 21:31:48 +08:00 HTTP 容器给图片（或者目录或者什么的）加 Cache-Control: no-cache |
| 3 cpstar 2022-12-02 21:33:55 +08:00  1 或者 li 的 img 不写东西，全靠 js 调用填充 |
 | 4 yuzo555 2022-12-02 21:35:12 +08:00 1 首先不建议在服务端搞动态图片，这样缓存优势都没了，也没法上 CDN 。最好是在前端实现随机选择图片文件名，固定的 URL 地址对应固定的图片。 然后就是你这个问题，innerHTML 是指元素内部的 HTML 。你这个 id="pic1" 应该设置到 <li> 上才是正确的；或者不使用 innerHTML ，改用 outerHTML 也可以。 |
 | 5 Ger2EX OP 谢谢各位的点拨，解决了 ``` var ext = Math.random() ; #先定义一个变量赋值随机数 document.getElementById("pic2").src='pic2.png?t=' + ext; # 带入新的图片 document.getlementById("pic2").innerHTML='<img src="http://www.v2ex.com/imgs/pic2.png?t=' + ext + '" />'; # 缓存加载新的图片 ``` |
Select Language