CODEWITHSUNDEEP
javascript
Slipknot1
Slipknot1

Reputation: 31

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:

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

Upvotes: 0

Views: 1204

Answers (4)

Jarek Kulikowski
Jarek Kulikowski

Reputation: 1389

You don't need a window.onload event to start your updates. The code below start as soon as the page is loaded, loops every 100ms and terminates when you close or reload the page.

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)

Upvotes: 0

Rawand
Rawand

Reputation: 16

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 

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

Upvotes: 0

Mihai
Mihai

Reputation: 10727

I suggest to only change the SRC of the image instead of the whole tag:

<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".

Upvotes: 1

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

First of all, there are two different built-in JavaScript functions to execute some code with a delay.

  1. setInterval() will execute the code every X milliseconds automatically, while
  2. setTimeout() will execute the code once after X milliseconds

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.

You can either put setInterval() outside of the callback function or call setTimeout inside of the callback function to avoid this.

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(). By that time, any elements referenced inside the function might not yet be in the DOM. Instead, you want to set merely the function reference as the onload callback on the window object:

window.onload = refreshBlock;

Upvotes: 1

Related Questions