刷新图像与一个新的一个在相同的url

我正在访问我的网站上的一个链接，每次访问它都会提供一个新的图像。

我遇到的问题是，如果我试图在后台加载图像，然后更新页面上的图像，图像不会改变——尽管在我重新加载页面时它会更新。

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);
}

FireFox看到的头文件:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT

我需要强制刷新页面上的图像。什么好主意吗?

当前回答

尝试在url的末尾添加cachebreaker:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

这将在创建图像时自动附加当前时间戳，并且它将使浏览器重新查找图像，而不是从缓存中检索图像。

2009-07-02 22:46:10

其他回答

下面的代码用于在单击按钮时刷新图像。

function reloadImage(imageId) {
   imgName = 'vishnu.jpg'; //for example
   imageObject = document.getElementById(imageId);
   imageObject.src = imgName;
}

<img src='vishnu.jpg' id='myimage' />

<input type='button' onclick="reloadImage('myimage')" />

2018-03-19 18:16:35

不需要新的Date(). gettime()恶作剧。你可以通过使用jQuery .load()创建一个不可见的虚拟图像来欺骗浏览器，然后每次创建一个新的图像:

<img src="" id="dummy", style="display:none;" />  <!-- dummy img -->
<div id="pic"></div>

<script type="text/javascript">
  var url = whatever;
  // You can repeat the following as often as you like with the same url
  $("#dummy").load(url);
  var image = new Image();
  image.src = url;
  $("#pic").html("").append(image);
</script>

2019-10-07 20:10:11

这个答案基于上面的几个答案，但将它们稍加统一和简化，并将答案转换为JavaScript函数。

function refreshCachedImage(img_id) {
    var img = document.getElementById(img_id);
    img.src = img.src; // trick browser into reload
};

我需要解决动画svg在第一次玩完后不能重新启动的问题。

这个技巧也适用于其他媒体，如音频和视频。

2021-05-12 21:40:59

一种解决方法是像建议的那样笨拙地添加一些get查询参数。

更好的答案是在HTTP报头中发出两个额外的选项。

Pragma: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Cache-Control: no-cache, must-revalidate

通过提供过去的日期，它不会被浏览器缓存。缓存控制是在HTTP/1.1中添加的，必须重新验证标签表明代理永远不应该提供旧的映像，即使是在可减轻的情况下，而Pragma: no-cache对于当前的现代浏览器/缓存来说并不是真正必要的，但可能有助于一些复杂的破碎的旧实现。

2009-07-02 22:57:03

函数reloadImage (imageId) ｛ path =' ../showImage.php?cache=';/ /例如 imageObject = document.getElementById(imageId); imageObject。src = path + (new Date()).getTime(); ｝ <img src='../showImage.php' id='myimage' /> < br / > <input type='button' onclick="reloadImage('myimage')"/>

2015-05-01 15:09:39

刷新图像与一个新的一个在相同的url

推荐文章

最新文章

标签