Question

我正在尝试建立一个允许我查看屏幕的网站。
但是我不知道如何获得不断变化的图像。
感谢您的帮助

这是我当前的JS代码：

window.onload = refreshBlock();
function refreshBlock()
{
    document.getElementById("video").innerHTML = "<img src='image1.jpg' width='1000' height='500'></img>"
    setInterval("refreshBlock();",100);
}

Answer 1

首先，有两个不同的内置JavaScript函数可以延迟执行某些代码。

setInterval()将每隔X毫秒自动执行一次代码，
setTimeout()将在X毫秒后执行一次代码

您当前正在执行的操作是每100毫秒调用一次refreshBlock()，并在该函数中生成一个新的间隔，因此，在进行几次迭代之后，您最终会得到成百上千个间隔的指数增长。

您可以将setInterval()放在回调函数之外，也可以在回调函数内部调用setTimeout来避免这种情况。

除此之外，

window.onload = refreshBlock();

没有按照您认为的去做。通过()调用函数，就可以将window.onload设置为refreshBlock()的执行结果。到那时，该函数内部引用的任何元素可能尚未在DOM中。相反，您只想将函数引用设置为window对象上的onload回调：

window.onload = refreshBlock;

Answer 2

我建议只更改图片的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>

“ setTimeout”比“ setInterval”还多。

Answer 3

您不需要window.onload事件就可以开始更新。下面的代码在页面加载后立即开始，每个100ms都会循环，并在您关闭或重新加载页面时终止。

let handle = setInterval( () => {
    document.getElementById("video").innerHTML = "<img src='image1.jpg' width='1000' height='500'></img>" 
}, 100);

要随时终止setInterval循环，可以使用clearInterval(handle)

Answer 4

您要o不断更改图像，这是三个图像的一个简单示例，它将不断在这些图像之间进行切换，因此换句话说，图像将不断更改，我有很多示例，但我相信这是最简单的一个< / p>

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);
}

如何不断更新图像？

4 个答案: