Javascript 无需重新加载页面即可更新图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6509981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating a picture without page reload
提问by Mehran
How would I go about updating an image that gets updated on a server every couple of seconds with out the user having to hit the refresh button, my first guess was ajax but I haven't really worked with it before. Could someone point me in the right direction?
我将如何更新每几秒钟在服务器上更新一次的图像，而无需用户点击刷新按钮，我的第一个猜测是 ajax，但我之前没有真正使用过它。有人能指出我正确的方向吗？
EDIT: Forgot to mention that the image is a .gif generated by a perl script - trying to grab it by url return a script
编辑：忘记提及图像是由 perl 脚本生成的 .gif - 尝试通过 url 获取它返回一个脚本
采纳答案by fromvega
It seems there is something wrong with your Perl script. Trying to access the image by the URL should return an image anyway. It should return binary data and not a script. You should also set the Content-type header of the response to image/gif. Verify if it indeed returns binary data before trying to fix your JavaScript code.
您的 Perl 脚本似乎有问题。无论如何，尝试通过 URL 访问图像应该返回图像。它应该返回二进制数据而不是脚本。您还应该将响应的 Content-type 标头设置为 image/gif。在尝试修复您的 JavaScript 代码之前验证它是否确实返回了二进制数据。
回答by gilly3
No AJAX is necessary, just update the image's srcproperty. But, since it has the same url, you have to give the browser a unique address to ensure you don't just load the old image from the browser's cache. You can guarantee a unique image by getting the current date's serial number via new Date().valueOf()and appending that to the url as a querystring.
不需要 AJAX，只需更新图像的src属性。但是，由于它具有相同的 url，您必须为浏览器提供一个唯一的地址，以确保您不只是从浏览器的缓存中加载旧图像。您可以通过获取当前日期的序列号new Date().valueOf()并将其作为查询字符串附加到 url来保证唯一的图像。
$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());
You can also use new Date().getTime()to get the serial number, or just coerce the date to a number: +new Date()
您还可以使用new Date().getTime()获取序列号，或者只是将日期强制为一个数字：+new Date()
To do it on a timer use setInterval(). This would be the complete code that you could just drop inside a script tag in your page's <head>:
要在计时器上执行此操作，请使用setInterval(). 这将是完整的代码，您可以将其放入页面的脚本标记中<head>：
$(function() {
var intervalMS = 5000; // 5 seconds
setInterval(function() {
$("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
}, intervalMS);
});
回答by Steffen Müller
Do something like
做类似的事情
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
This changes the src attribute of your image tag (with id "yourimage") and adds a random query string to it, forcing the browser to reload the image each time you change it.
这会更改图像标记的 src 属性（ID 为“yourimage”）并向其添加一个随机查询字符串，从而在每次更改图像时强制浏览器重新加载图像。
To reload the image every 5 seconds, do something like:
要每 5 秒重新加载一次图像，请执行以下操作：
window.setInterval(function()
{
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);
回答by Steve
just use javascript to update the src property of the img.
只需使用 javascript 更新 img 的 src 属性。
HTML:
HTML：
<img src="..." id="myImage" />
JS:
JS：
document.getElementById("myImage").src = "http://....";
If you want it on a timer, do something like this:
如果您想在计时器上使用它，请执行以下操作：
setInterval(function() { ... }, 4000);
If you have an issue with caching, add a random query string to the end of the url: "?rnd=randomNumberHere"
如果您遇到缓存问题，请在 url 末尾添加一个随机查询字符串：“?rnd=randomNumberHere”
回答by Dulanjana Wickramatantri
Adding a time span to the end of the image URL worked for me.
在图像 URL 的末尾添加时间跨度对我有用。
var imagePath = "http://localhost/dynamicimage.ashx";
var imagePath = " http://localhost/dynamicimage.ashx";
$("#imgImage").attr("img", imagePath + &ts" + (new Date()),toString() );
$("#imgImage").attr("img", imagePath + &ts" + (new Date()),toString());
回答by bravedick
every X seconds send Ajax to server. if link of image from response == previous, no update, if link new: $('img.class').attr('src','link');
每 X 秒发送一次 Ajax 到服务器。如果来自响应的图像链接 == 以前，没有更新，如果链接是新的：$('img.class').attr('src','link');
