CODEWITHSUNDEEP
javascripthtmlimage
Martin Tomko
Martin Tomko

Reputation: 155

Reload <img> element from same source

I have an image at the URL http://192.168.1.53/html/cam.jpg (from a Raspberry Pi) and this image is changing very fast (it is from a camera).

So I want to have some JavaScript on a website that will reload this image every second for example.

My HTML is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pi Viewer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <body>

      <style>
          img,body {
              padding: 0px;
              margin: 0px;
          }
      </style>

      <img id="img" src="http://192.168.1.53/html/cam.jpg">
      <img id="img1" src="http://192.168.1.53/html/cam.jpg">

      <script src="script.js"></script>
  </body>
</html>

And my script:

function update() {
    window.alert("aa");
    document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg";
    document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg";
    setTimeout(update, 1000);
}
setTimeout(update, 1000);

alert is working, but the image is not changing :/ (I have 2 images (they are the same))

Upvotes: 6

Views: 11536

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

The problem is that the image src is not altered so the image is not reloaded.

You need to convince the browser that the image is new. A good trick is to append a timestamp to the url so that it is always considered new.

function update() {
    var source = 'http://192.168.1.53/html/cam.jpg',
        timestamp = (new Date()).getTime(),
        newUrl = source + '?_=' + timestamp;
    document.getElementById("img").src = newUrl;
    document.getElementById("img1").src =  newUrl;
    setTimeout(update, 1000);
}

Upvotes: 21

Related Questions