logo标签列表

在相同的URL上刷新图像为新的图片

javascriptimageurlrefresh
451

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

我的问题是，如果我尝试在后台加载图像，然后更新页面上的图像，那么图像不会更改-但当我重新加载页面时，它会更新。

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
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

我需要强制刷新页面上的特定图片。有什么想法吗？

请参考以下链接：https://dev59.com/ZHVC5IYBdhLWcg3w-mZO - Philibert Perusse
19
十年过去了，我们仍然需要用hack的方法来实现这一点。浏览器制造商不能提供：img.reload()吗？ - Daniel Wu
2
fetch是2022年更好的解决方案！请参见https://dev59.com/6XNA5IYBdhLWcg3wIqPr#66312176 - C-Y
23个回答
0

不需要使用 new 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>
0
简单的解决方案：将此标头添加到响应中：
Cache-control: no-store

为什么这个方法有效的解释可以在这个权威页面找到：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

它还解释了为什么no-cache不起作用。

其他答案不起作用，因为：

Caching.delete是关于你可能为离线工作创建的新缓存，请参见：https://web.dev/cache-api-quick-guide/

在URL中使用#的片段不起作用，因为#告诉浏览器不向服务器发送请求。

添加随机部分的缓存破坏器可以工作，但也会填充浏览器缓存。在我的应用程序中，我想每几秒钟从网络摄像头下载一个5 MB的图片。只需要一个小时或更短的时间就可以完全冻结您的电脑。我仍然不知道为什么浏览器缓存没有限制到合理的最大值，但这绝对是一个缺点。

-4

我使用了以下的概念，首先将图像绑定到一个错误（缓冲）URL，然后再将其绑定到有效的URL。

imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + "Buffer.jpg";

imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + ".jpg";

通过这种方式，我强制浏览器使用有效的URL进行刷新。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接