Question

如果用户不得不点击刷新按钮，我将如何每隔几秒更新一次在服务器上更新的图像，我的第一个猜测是ajax，但我之前并没有真正使用它。有人能指出我正确的方向吗？

编辑：忘记提到图像是由perl脚本生成的.gif文件 - 尝试通过url抓取它返回脚本

Answer 1

不需要AJAX，只需更新图像的src属性即可。但是，由于它具有相同的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);
});

Answer 2

执行类似

的操作

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

这会更改图像标记的src属性（id为“yourimage”）并向其添加一个随机查询字符串，强制浏览器每次更改时重新加载图像。

要每5秒重新加载一次图像，请执行以下操作：

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

Answer 3

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

HTML：

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

JS：

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

如果您想在计时器上使用，请执行以下操作：

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

如果您遇到缓存问题，请在网址末尾添加随机查询字符串：“？rnd = randomNumberHere”

Answer 4

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

Answer 5

在图片网址末尾添加时间跨度对我有用。

var imagePath =“http://localhost/dynamicimage.ashx”;

$（“＃imgImage”）。attr（“img”，imagePath +＆amp; ts“+（new Date（）），toString（））;

Answer 6

每隔X秒将Ajax发送到服务器。如果来自response == previous的图像链接，则不进行更新，如果链接为new：$('img.class').attr('src','link');

更新图片而不重新加载页面

6 个答案: