动态图像刷新

Dynamic image refresh

本文关键字：刷新 图像 动态      更新时间：2023-09-26

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

编辑：忘了提一下，图像是由perl脚本生成的.gif——试图从url获取它会返回脚本本身。

不需要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);
});

执行类似的操作

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

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

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

HTML:

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

JS:

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

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

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

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

在图像URL的末尾添加一个时间跨度对我来说很有效。

var imagePath="http://localhost/dynamicimage.ashx"；

$（"#imgImage"）.attr（"img"，imagePath+&ts"+（new Date（）），toString（））；

每X秒将Ajax发送到服务器。如果来自响应的图像链接==以前，则不更新，如果链接是新的：$('img.class').attr('src','link');

相关文章：