动态图像刷新

Question

动态图像刷新

javascripthtmljqueryajax

10

如何在用户不必点击刷新按钮的情况下更新每几秒钟从服务器更新的图像？我的第一个猜测是使用ajax，但我以前没有真正使用过。有人能指点我吗？

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

- Gunslinger

你说“尝试通过URL获取脚本”，但你暗示你可以通过刷新页面重新加载图像。因此，必须有一个获取图像的URL。请编辑你的问题，包括在查看源代码时找到的img标签的HTML。 - gilly3

@gilly3，这个页面没有页面源代码，整个页面只是由一个Perl脚本生成的图像，因此没有img标签，也没有HTML。我想抓取那个图像并将其放在网页中，并刷新它以更新从Perl脚本生成的图像。 - Gunslinger

6个回答

10

执行如下操作：

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

这将更改具有id“yourimage”的图像标签的src属性，并添加一个随机查询字符串，每次更改时强制浏览器重新加载图像。

要每5秒重新加载图片，可以执行以下操作：

window.setInterval(function()
{
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);

- Steffen Müller

4

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

HTML:

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

JS:

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

如果您想要定时器，可以按照以下方式操作：

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

如果您遇到缓存问题，请在URL的末尾添加一个随机查询字符串：“?rnd=randomNumberHere”。

- Steve

4

你的Perl脚本似乎有问题。通过URL访问图像应该返回一个图像，而不是一个脚本。应该返回二进制数据而不是脚本。在尝试修复JavaScript代码之前，请确保响应的Content-type头设置为image/gif，并验证是否确实返回了二进制数据。

- lbrandao

1

在图片URL的末尾添加一个时间段对我有用。

变量imagePath = "http://localhost/dynamicimage.ashx"; $("#imgImage").attr("img", imagePath + &ts" + (new Date()),toString() );

- Dulanjana Wickramatantri

0

每隔X秒向服务器发送Ajax请求。如果响应中的图像链接与之前相同，则不更新，如果是新链接：$('img.class').attr('src','link');

- korywka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gilly3 · Accepted Answer

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

$("#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);
});