admin管理员组文章数量:1425232
I am trying to load the latest image from a CCTV server for each of our cameras on our network.
I have the following code, which works correctly and refreshes the image constantly. However, on the final version of the page there will be around 10 camera images on the page. I was wondering if the code I have now could be altered to refresh all images - not just specific ones.
At first I thought I could just use the same identifier for each image, but then I realised that the source of each image differs.
<html>
<head>
<title>CCTV Test</title>
<script type="text/javascript" language="JavaScript">
newImage = new Image();
function LoadNewImage()
{
var unique = new Date();
document.images.ward.src = newImage.src;
newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
}
function InitialImage()
{
var unique = new Date();
newImage.onload = LoadNewImage;
newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
document.images.ward.onload="";
}
</script>
</head>
<body>
<img src="http://192.168.1.64/image/WARD" name="ward" onload="InitialImage()">
</body>
</html>
Any pointers would be appreciated!
I am trying to load the latest image from a CCTV server for each of our cameras on our network.
I have the following code, which works correctly and refreshes the image constantly. However, on the final version of the page there will be around 10 camera images on the page. I was wondering if the code I have now could be altered to refresh all images - not just specific ones.
At first I thought I could just use the same identifier for each image, but then I realised that the source of each image differs.
<html>
<head>
<title>CCTV Test</title>
<script type="text/javascript" language="JavaScript">
newImage = new Image();
function LoadNewImage()
{
var unique = new Date();
document.images.ward.src = newImage.src;
newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
}
function InitialImage()
{
var unique = new Date();
newImage.onload = LoadNewImage;
newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
document.images.ward.onload="";
}
</script>
</head>
<body>
<img src="http://192.168.1.64/image/WARD" name="ward" onload="InitialImage()">
</body>
</html>
Any pointers would be appreciated!
Share Improve this question asked Sep 4, 2012 at 8:56 dannymccdannymcc 3,82412 gold badges54 silver badges87 bronze badges 5-
Loop through the
document.imageslist, and refresh the image. – Rob W Commented Sep 4, 2012 at 8:59 - I'm pletely new to JS, an links to tutorials etc. that could explain a bit more on how to loop through things, as per your suggestion? Thanks! – dannymcc Commented Sep 4, 2012 at 9:01
- Something like this: '$("img").each(function() { console.log($(this).prop("src")); });'? – dannymcc Commented Sep 4, 2012 at 9:02
- How do you determine the source of each image? Is it fixed, i.e., you have, say, 10 different sources for each image? – João Silva Commented Sep 4, 2012 at 9:02
- Yes, it's fixed. They each have their own URL. The URLs will never change (well, not within a few years). – dannymcc Commented Sep 4, 2012 at 9:03
1 Answer
Reset to default 4Something along the lines of this:
<!DOCTYPE html>
<html>
<head>
<title>CCTV Test</title>
</head>
<body>
<img src="http://192.168.1.64/image/WARD?time=...">
<img src="http://192.168.1.64/image/WARD?time=...">
etc.
<script>
setInterval(function() {
var images = document.images;
for (var i=0; i<images.length; i++) {
images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
}
}, 10000); // 10000 milliseconds = 10 seconds
</script>
</body>
</html>
This will refresh all images every 10 seconds.
A different approach is to store the locations of the images in an array.
本文标签： htmlRefresh all images with javascriptStack Overflow
版权声明：本文标题：html - Refresh all images with javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745418648a2657803.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论