文章/答案/技术大牛

发布

社区首页 >问答首页 >动态图像刷新

问动态图像刷新
EN

Stack Overflow用户

提问于 2011-06-29 00:40:46

回答 5查看 31.2K关注 0票数 9

如果服务器上的图像每隔几秒钟就会更新一次，而用户不需要点击刷新按钮，我该如何更新呢?我的第一个猜测是ajax，但我以前并没有真正使用过它。有人能给我指个方向吗？

编辑:忘记提到图像是由perl脚本生成的.gif -尝试从url获取它会返回脚本本身。

html

jquery

ajax

javascript

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-06-29 00:55:57

您的Perl脚本似乎有问题。尝试通过URL访问图像时，无论如何都应该返回图像。它应该返回二进制数据，而不是脚本。您还应该将响应的Content-type头部设置为image/gif。在尝试修复JavaScript代码之前，请验证它是否确实返回了二进制数据。

票数 3

Stack Overflow用户

发布于 2011-06-29 00:57:17

不需要AJAX，只需更新图像的src属性即可。但是，由于它有相同的url，你必须给浏览器一个唯一的地址，以确保你不会只是从浏览器的缓存中加载旧图像。您可以通过new Date().valueOf()获取当前日期的序列号，并将其作为查询字符串附加到url，从而保证图像的唯一性。

$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

您还可以使用new Date().getTime()获取序列号，或者仅将日期强制转换为一个数字：+new Date()

要在计时器上执行此操作，请使用setInterval()。这将是完整的代码，您只需将其放入页面<head>的脚本标记中即可

$(function() {
   var intervalMS = 5000; // 5 seconds
   setInterval(function() {
      $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
   }, intervalMS);
});

票数 12

Stack Overflow用户

发布于 2011-06-29 00:44:03

只需使用javascript更新img的src属性即可。

HTML：

<img src="..." id="myImage" />

JS：

document.getElementById("myImage").src = "http://....";

如果你想把它放在计时器上，可以这样做：

setInterval(function() { ... }, 4000);

如果缓存有问题，可以在url的末尾添加一个随机查询字符串："?rnd=randomNumberHere“

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6509981

复制

相似问题

问动态图像刷新
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态图像刷新EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态图像刷新
EN