首页 > web前端 > js教程 > 为什么我的动态加载图像在不重新加载页面的情况下无法更新?

为什么我的动态加载图像在不重新加载页面的情况下无法更新?

DDD
发布: 2024-12-11 11:42:10
原创
997 人浏览过

Why Isn't My Dynamically Loaded Image Updating Without a Page Reload?

疑难解答:图像未动态更新

访问每次请求时提供新图像的链接时,您可能会遇到图像加载到除非您重新加载页面,否则页面上的背景无法更新。

下面的代码说明了问题:

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        number++;
        newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
    }

    setTimeout(updateImage, 1000);
}
登录后复制

在这种情况下,即使请求标头指示缓存已禁用,页面上的图像也不会更新:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
登录后复制

解决方案:Cachebreaker

要强制刷新图像,请在末尾添加一个缓存破坏器URL:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();
登录后复制

通过附加当前时间戳,您可以确保浏览器将从服务器检索图像而不是使用缓存版本。此技术将允许图像按预期在页面上动态更新。

以上是为什么我的动态加载图像在不重新加载页面的情况下无法更新?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板