javascript 自动更新图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8459896/
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
Auto update Image
提问by glarkou
I have an image and I want to automatically update it using either javascript, jquery or ajax.
我有一个图像，我想使用 javascript、jquery 或 ajax 自动更新它。
Until now I have the following code.
到目前为止，我有以下代码。
<html>
<head>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
document.images['myCam'].src = 'swt.png';
setTimeout('refreshIt()',50); // refresh every 50ms
}
//--></script>
</head>
<body onLoad=" setTimeout('refreshIt()',50)">
<img src="swt.png" name="myCam">
</body>
</html>
I think it is not working because the browser is caching the image and it is not updating the image correctly.
我认为它不起作用，因为浏览器正在缓存图像并且没有正确更新图像。
Can someone provide me a working example?
有人可以为我提供一个工作示例吗？
回答by benastan
This will do the trick, but it's a nightmare as far as performance.
这可以解决问题，但就性能而言，这是一场噩梦。
<html>
<head>
<script language="JavaScript">
function refreshIt(element) {
setTimeout(function() {
element.src = element.src.split('?')[0] + '?' + new Date().getTime();
refreshIt(element);
}, 50); // refresh every 50ms
}
</script>
</head>
<body>
<img src="swt.png" name="myCam" onload="refreshIt(this)">
</body>
</html>
回答by Fyodor Soikin
Just add a random number to the query string on every refresh. This will trick the browser into thinking this is a different resource, while the server will serve the same picture.
只需在每次刷新时向查询字符串添加一个随机数。这将欺骗浏览器认为这是不同的资源，而服务器将提供相同的图片。
回答by Trevor
On top of loading a different image each time and increasing the refresh time, you should start the setTimeoutagain after the image has fully loaded.
除了每次加载不同的图像并增加刷新时间之外，您应该setTimeout在图像完全加载后再次启动。
function refreshIt() {
if (!document.images) return;
var img = new Image();
img.src = 'swt.png'; // use a random image
img.addEventListener('load', function () {
// you should cache the image element
document.images['myCam'].src = this.src;
setTimeout(refreshIt, 50); // refresh every 50ms
}, false);
}
}
回答by driis
You are setting the image source to the same string. That will not refresh the image, the browser thinks it already has that image, and won't issue another request. Try adding a random query parameter each time you want to refresh - then the browser should see the image as different resources.
您将图像源设置为相同的字符串。那不会刷新图像，浏览器认为它已经拥有该图像，并且不会发出另一个请求。每次要刷新时尝试添加一个随机查询参数 - 然后浏览器应该将图像视为不同的资源。
回答by kubetz
Replace this line:
替换这一行：
document.images['myCam'].src = 'swt.png';
with:
和：
var date = new Date();
document.images['myCam'].src = 'swt.png?ts=' + date.getTime();
This will generate different link each time and cached version of the img won't be used.
这将每次生成不同的链接，并且不会使用 img 的缓存版本。
And don't refresh the image every 50ms. That is way too often.
并且不要每 50 毫秒刷新一次图像。那太频繁了。
回答by thunderfroggum
The solutions in this thread will work, but they force the browser to download the image every time the function runs. This will check for a new image without actually downloading until a new one is available. This process should be split off into a Worker for optimal performance.
此线程中的解决方案将起作用，但它们会强制浏览器在每次运行该函数时下载图像。这将检查新图像而无需实际下载，直到有新图像可用。这个过程应该被拆分成一个 Worker 以获得最佳性能。
<html>
<head>
<script language="JavaScript">
var lastModified;
var reader;
var http;
function init() {
http = new XMLHttpRequest();
http.onreadystatechange = function (e1) {
if (this.readyState == 4 && this.status == 200) {
reader = new FileReader();
reader.onloadend = function (e2) {
if (this.readyState == 2) {
var dataUrl = this.result;
document.getElementById("image").src = dataUrl;
}
}
reader.readAsDataURL(new Blob([http.response], {type: http.getResponseHeader("Content-Type")}));
}
}
refresh();
}
function refresh() {
http.open("GET", "http://" + window.location.hostname + "/current", true);
if (lastModified != null) http.setRequestHeader("If-Modified-Since", lastModified);
http.responseType = "blob";
http.send(null);
if (http.getResponseHeader("Last-Modified") != null) lastModified = http.getResponseHeader("Last-Modified");
setTimeout(refresh, 50);
}
</script>
</head>
<body onload="init()">
<img id="image" src="">
</body>
</html>
