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

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

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

下面的代码说明了问题：

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中文网其他相关文章！