如何不断更新图像？
[英]How can I constantly update an image?
问题描述
I'm trying to build a website that allows me to see my screen. 
我正在尝试建立一个允许我查看屏幕的网站。
But I don't know how I can get the image it's displaying to constantly change. 但是我不知道如何获得不断变化的图像。
Thanks for the help 谢谢您的帮助
Here is my current JS code: 这是我当前的JS代码：
window.onload = refreshBlock();
function refreshBlock()
{
document.getElementById("video").innerHTML = "<img src='image1.jpg' width='1000' height='500'></img>"
setInterval("refreshBlock();",100);
}
4 个解决方案
解决方案1
1 2019-05-05 18:43:36
First of all, there are two different built-in JavaScript functions to execute some code with a delay. 首先，有两个不同的内置JavaScript函数可以延迟执行某些代码。
-
setInterval()will execute the code every X milliseconds automatically, whilesetInterval()将每X毫秒自动执行一次代码，而 -
setTimeout()will execute the code once after X millisecondssetTimeout()将在X毫秒后执行一次代码
What you're currently doing is calling refreshBlock() every 100 milliseconds, and in that function generating a new interval, so after a few iterations, you end up with hundreds of intervals growing exponentially. 您当前正在执行的操作是每100毫秒调用一次refreshBlock() ，并在该函数中生成一个新的间隔，因此，在进行几次迭代后，最终会成百上千个间隔成倍增长。
You can either put setInterval() outside of the callback function or call setTimeout inside of the callback function to avoid this. 您可以将setInterval()放在回调函数之外，也可以在回调函数内部调用setTimeout来避免这种情况。
In addition to that, 在此之上，
window.onload = refreshBlock();
is not doing what you think it's doing. 没有按照自己的想法去做。 By calling the function via () , you are setting window.onload to the result of the execution of refreshBlock() . 通过()调用函数，可以将window.onload设置为执行refreshBlock() 。 By that time, any elements referenced inside the function might not yet be in the DOM. 到那时，该函数内部引用的任何元素可能尚未在DOM中。 Instead, you want to set merely the function reference as the onload callback on the window object: 相反，您只想将函数引用设置为window对象上的onload回调：
window.onload = refreshBlock;
解决方案2
1 2019-05-05 18:49:36
I suggest to only change the SRC of the image instead of the whole tag: 我建议只更改图片的SRC，而不要更改整个标签：
<html>
<body>
<div id="video">
<img src='image1.jpg' width='1000' height='500' id="image"></img>
</div>
<script>
window.onload = refreshBlock;
function refreshBlock()
{
document.getElementById("image").src="image4.jpg";
setTimeout("refreshBlock",1000);
}
</script>
</body>
</html>
Also "setTimeout" is more what you need than "setInterval". 另外，“ setTimeout”比“ setInterval”更需要您。
解决方案3
0 2019-05-05 18:38:19
You don't need a window.onload event to start your updates. 您不需要window.onload事件即可开始更新。 The code below start as soon as the page is loaded, loops every 100ms and terminates when you close or reload the page. 下面的代码在页面加载后立即开始，每100ms循环一次，并在您关闭或重新加载页面时终止。
let handle = setInterval( () => {
document.getElementById("video").innerHTML = "<img src='image1.jpg' width='1000' height='500'></img>"
}, 100);
To terminate the setInterval loop at any time you can use clearInterval(handle) 要随时终止setInterval循环，可以使用clearInterval(handle)
解决方案4
0 2019-05-05 19:09:03
you want o change the images constantly this is a simple example for three images it will keep switching between these images constantly so by another meaning the images will keep changing there are many example i have but i believe this is the easiest one 您想要o不断更改图像，这是三个图像的一个简单示例，它将不断在这些图像之间进行切换，因此，通过另一种含义，图像将不断更改。我有很多示例，但我相信这是最简单的一个示例
refreshBlock();
function refreshBlock() {
var x = 0;
//image 1
document.getElementById("v").innerHTML =" <img src='image1.jpg' width='1000' height='500'></img>";
setInterval(function() {
if (x == 0) {
//image 2
document.getElementById("v").innerHTML =" <img src='image2.jpg' width='1000' height='500'></img>";
} else if (x == 1) {
//image 3
document.getElementById("v").innerHTML =" <img src='image3.jpg' width='1000' height='500'></img>";
}
x++;
if (x == 2) {
x = 0;
}
}, 5000);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.