读书人

jQuery和IE缓存有关问题

发布时间: 2013-01-05 15:20:40 作者: rapoo

jQuery和IE缓存问题
很简单的功能,分别点击按钮1和2,将切换图片区域的图片


<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
$('#testimg').attr({ src: "images/1.jpg", alt: "Test Image" });
})
$('#Button2').click(function () {
$('#testimg').attr({ src: "images/2.jpg", alt: "Test Image" });
})

})
</script>


<input id="Button1" type="button" value="button1" />
<input id="Button2" type="button" value="button2" />
<img id="testimg" alt="jQuery和IE缓存有关问题" />

但是IE下由于缓存的作用,当我点击按钮1时是1.jpg,正常显示。然后我用新的1.jpg代替原来的1.jpg时,显示的还是老的1.jpg。无论你怎么点击,反正就是不会加载新的1.jpg。除非你清理一下缓存。
请问有什么方法能够让jQuery避免这种现象呢?因为我服务器上的新图片会替代原来的就图片。比如上传头像,新的头像会替代旧的头像,但是头像都是用id的形式来命名所以文件名不会变。如何解决呢?
ps:用chrome浏览器不会有此类问题。但是客户要求支持IE浏览器
[解决办法]
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
$('#testimg').attr({ src: "images/1.jpg?"+new Date().getTime(), alt: "Test Image" });
})
$('#Button2').click(function () {
$('#testimg').attr({ src: "images/2.jpg?"+new Date().getTime(), alt: "Test Image" });
})

})
</script>
[解决办法]
1、时间戳
2、随机数

读书人网 >JavaScript

热点推荐