日期:2014-05-16  浏览次数:20433 次

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="test" />

但是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、随机数