javascript - 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))

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

Share Improve this question edited Sep 27, 2016 at 20:46 Lazzaro 1892 silver badges7 bronze badges asked Sep 27, 2016 at 19:00 Martin Tomko 1551 gold badge2 silver badges14 bronze badges

1 Looks like you have 2 ids and a single image not 2 images – O.Rares Commented Sep 27, 2016 at 19:02
The problem here is that the image is the same source every time, so the browser doesn't re-load the image. You'll have to manually re-load the image in order to get it to refresh. – Ava Commented Sep 27, 2016 at 19:02
How can i manualy reload image? Only by refreshing page? isnt there other way? – Martin Tomko Commented Sep 27, 2016 at 19:05
Set src="" and after a short time back to src="img.jpg" – Jonas Wilms Commented Sep 27, 2016 at 19:05
1 by adding a timestamp like src="img.jpg?timestamp=1231512515" if you don't the browser will cache it and you will get the same image – WalksAway Commented Sep 27, 2016 at 19:06

Add a comment |

1 Answer 1

Sorted by: Reset to default 21

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Reload <img> element from same source - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)