js动态请求img的src同一地址刷新图片但显示不改变存在缓存的问题

Web前端 潘老师 3个月前 (09-14) 194 ℃ (0) 扫码查看

由于潘老师最近在开发一个页面要求动态刷新一个存放在固定目录固定名称的图片,该图片会不断地被新图片覆盖,但图片名称始终不变,要求在页面上实时地显示该图片。看上去该问题很简单,直接使用img标签引用图片地址就能显示,但是当图片改变了,即使你定时去请求图片,你会发现页面上的图片始终还是原来的图片。这是因为存在缓存的原因。那该怎么解决这个缓存问题呢?

解决办法

解决方案其实非常简单,就是在src的图片路径后面指定一个随机数参数就可以了,这样你每次去请求时,浏览器认为你每次是访问了不同的图片路径,从而每次都会重新访问服务器读取图片, 而不再读取缓存中的图片。虽然该随机数没有什么实际含义,但对浏览器而言,请求地址是不一样的。因此,具体的实现案例代码如下:

<script type="text/javascript">
    $(function() {
        // 定时刷新图片
        setInterval("refreshPic()",2000);
    });
    // 刷新图片
    function refreshPic(){
        // 需要刷新的固定图片地址
        var picUrl = '/pics/save.jpg';
        // 每次刷新添加上随机数
        $('#picId').attr('src', picUrl + "?" + Math.random());
    }  
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true,border:false">
        <img id="picId" alt="" src="/pics/save.jpg" style="width:500px;height:500px">
    </div>
</body>

然后你去测试页面,会发现,只要该图片发生的改变,你都能刷新出最新图片,那么缓存的问题就解决了。


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:js动态请求img的src同一地址刷新图片但显示不改变存在缓存的问题
喜欢 (1)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!