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

用户投稿 • 2021-09-15 19:03 星期三 • 阅读 190

安理论坛：由于潘老师最近在开发一个页面要求动态刷新一个存放在固定目录固定名称的图片，该图片会不断地被新图片覆盖，但图片名称始终不变，要求在页面上实时地显示该图片。看上去该问题很简单，直接使用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同一地址刷新图片）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

友情链接交换
搜素引擎算法
关键词排名优化
SEO小小课堂网
SEO教程
友情链接交换
搜素引擎算法
关键词排名优化

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/27549.html