我在网址http://192.168.1.53/html/cam.jpg(来自Raspberry Pi)上有一张图片,这张图片变化非常快(来自相机)。
所以我希望在一个网站上有一些JavaScript,例如每秒都会重新加载这个图像。
我的HTML是:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pi Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<style>
img,body {
padding: 0px;
margin: 0px;
}
</style>
<img id="img" src="http://192.168.1.53/html/cam.jpg">
<img id="img1" src="http://192.168.1.53/html/cam.jpg">
<script src="script.js"></script>
</body>
</html>
我的剧本:
function update() {
window.alert("aa");
document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg";
document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg";
setTimeout(update, 1000);
}
setTimeout(update, 1000);
警报正在运行,但图片没有变化:/(我有2张图片(它们是相同的))
答案 0 :(得分:10)
问题是图像src
未被更改,因此不会重新加载图像。
您需要说服浏览器该图片是新的。一个好方法是在URL上附加一个时间戳,以便始终将其视为新的。
function update() {
var source = 'http://192.168.1.53/html/cam.jpg',
timestamp = (new Date()).getTime(),
newUrl = source + '?_=' + timestamp;
document.getElementById("img").src = newUrl;
document.getElementById("img1").src = newUrl;
setTimeout(update, 1000);
}