这是一个创建于 720 天前的主题，其中的信息可能已经有所发展或是发生改变。
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="/pic1.png" id="pic1"/> </li>
<li> <img src="/pic2.png" id="pic2"/> </li>
<li> <img src="/pic3.png" id="pic3"/> </li>
<li> <img src="/pic4.png" id="pic4"/> </li>
</ul>
</div>
<script>
setInterval(function() {
document.getElementById("pic2").innerHTML='<img src="/pic2.png?t=' +Math.random() + '" />';
document.getElementById("pic3").innerHTML='<img src="/pic3.png?t=' +Math.random() + '" />';
document.getElementById("pic4").innerHTML='<img src="/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.getElementById("pic2").innerHTML='<img src="/imgs/pic2.png?t=' + ext + '" />'; # 缓存加载新的图片 ``` |
Select Language