安理论坛(js动态请求img的src同一地址刷新图片)

cesc

安理论坛:由于潘老师最近在开发一个页面要求动态刷新一个存放在固定目录固定名称的图片,该图片会不断地被新图片覆盖,但图片名称始终不变,要求在页面上实时地显示该图片。看上去该问题很简单,直接使用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?x43045" style="width:500px;height:500px">
    </div>
</body>

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

随机文章

出口生意与外贸营销完整指南
小江SEO(讯飞翻译笔S11,学生们的新福利)
农民割麦得花钱喷淋降尘?官方回应
小小课堂:【宁德seo】熊掌号升级进阶
小小课堂:301重定向是什么意思?SEO教程
小小课堂:峙一百度AB实验开放平台
热血传奇那些事儿
王者荣耀三套出装助你全面掌握狂战士盘古-攻速暴击成脆皮噩梦

百度搜索“错误博客”即可找到本站,微信搜索“cuowucom”关注错误博客公众号。错误博客( cuowu.com )欢迎用户投稿,发布者:用户投稿,文章版权归作者所有,投稿文章不代表错误博客立场,中二少年发布为错误博客原创文章,转载请注明出处:https://cuowu.com/27549.html