How to make my code for animating from files with setInterval "play"?

I'm not a web programmer, but I'm trying to hack together a visualization of real-time data.

I have a separate computing process that is updating an image "heart.png" every 100 milliseconds.

I wrote this .html using the setInterval function. I intend for the image to refresh on a frequent basis, appearing as an animation.

I am able to see an image, and when I click "refresh" in my browser, I can see a new one, but the animation doesn't "play" in the way I intended. Is there an issue with this code? Or perhaps some issue with image caching? Many thanks!

<!DOCTYPE html>
<html>
<body onload = "animate();">
<img id = "animation">

<script>
  function animate() {
    id = setInterval(frame, 10);
    function frame() {
      document.getElementById("animation").src = "heart.png";
    }
  }
</script>

</body>
</html>

How to make my code for animating from files with setInterval "play"?

0 Answers