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

Meh*_*ran 9 html javascript ajax perl jquery

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

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

gil*_*ly3 11

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

$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());
Run Code Online (Sandbox Code Playgroud)

您还可以使用new Date().getTime()获取序列号,或者只是将日期强制转换为数字:+new Date()

要在计时器上使用它setInterval().这将是您可以放入页面中的脚本标记内的完整代码<head>:

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


Ste*_*ler 9

做点什么

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


fro*_*ega 4

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