13

I am using following code

<html>
<script>

    var newImage = new Image();

function updateImage() {
    if(newImage.complete) {
           newImage.src = document.getElementById("img").src;
           var temp = newImage.src;
           document.getElementById("img").src = newImage.src;
           newImage = new Image();
           newImage.src = temp+"?" + new Date().getTime();

}
setTimeout(updateImage, 1000);
};
</script>

<body onload="updateImage();">
<img id="img" src="http://cameraURI" style="position:absolute;top:0;left:0;height:50%;width:50%"/>
</body>
</html>

But my image is not getting refreshed. Note that for my application purpose, I cant use any url in script.

I know I need to remove newImage.src = document.getElementById("img").src; and need to place over function updateImage() in same file but if I do this, I am getting error as document.getElementById(" ").src is set to NULL and I cant use auto-refresh HTML page. So any help on this file??

5
  • change element id istead of using img
    – Sridhar R
    Commented Jan 2, 2014 at 6:55
  • @SridharR: I tried still same problem..
    – Rohit
    Commented Jan 2, 2014 at 6:56
  • add <head> tags in the head, right after html
    – caramba
    Commented Jan 2, 2014 at 7:02
  • @caramba: No error after adding <head> but still image is not getting refreshed..
    – Rohit
    Commented Jan 2, 2014 at 7:05
  • newImage loads the new image correctly, but is never used. See my answer for more explanation and working, simple code.
    – Trojan
    Commented Jan 2, 2014 at 7:39

4 Answers 4

18

Your code doesn't work because newImage is never used. The src of newImage changes correctly, and the new image will, in fact, be successfully loaded, but newImage is never inserted into the HTML.

This is the simplest way to do what you want:

window.onload = function() {
    var image = document.getElementById("img");

    function updateImage() {
        image.src = image.src.split("?")[0] + "?" + new Date().getTime();
    }

    setInterval(updateImage, 1000);
}

This code

  • Uses setInterval() instead of setTimeout(), since this is a repeated task
  • Alters the image's src attribute directly - no extra variable needed (i.e. newImage)
  • Does not require inline event handlers for any element
2
  • 1
    Move "var image = document.getElementById("img");" inside window.onload(), as element with ID "img" might not yet be defined when the javascript is executed, typically if in the HTML <head>.
    – François
    Commented Oct 25, 2014 at 19:24
  • @François thanks! Good correction. (I moved all of the code to window.onload())
    – Trojan
    Commented Oct 27, 2014 at 20:46
10

try this

function refresh(node)
{
   var times = 3000; // gap in Milli Seconds;

   (function startRefresh()
   {
      var address;
      if(node.src.indexOf('?')>-1)
       address = node.src.split('?')[0];
      else 
       address = node.src;
      node.src = address+"?time="+new Date().getTime();

      setTimeout(startRefresh,times);
   })();

}

window.onload = function()
{
  var node = document.getElementById('img');
  refresh(node);
  // you can refresh as many images you want just repeat above steps
}
0

There's supposedly a one-line solution at http://snipplr.com/view/17272/single-line-image-refresh/

Needs a little cleanup at least, when I copy and paste I get <img src=â€image.jpg†id=â€reloader†onload=â€setTimeout(’document.getElementById(\’reloader\’).src=\’image.jpg?\’+new Date().getMilliseconds()’, 5000)†/>

This version at least gives less errors:

<img src="test2.jpg" id="reloader" onLoad="setTimeout(document.getElementById('reloader').src='test2.jpg' ? +new Date().getMilliseconds(),5000)"/>

Double quote at the outermost (onLoad) level, singles inside those.

Nope, sorry, can't make it actually work. I'm using gphoto to get the viewfinder image from a camera, I was hoping to have that served over Apache on the machine that's running on. If I manually hit reload on the web page I see the image change, but it's not happening at the setTimeout interval. If I get it to work eventually I'll edit this, I saved the URL.

Left out the ?, now the image just doesn't change except when I reload the page.

Maybe something is wrong with my conversion of the quoting. In the original I think I see 3 different quote symbols, are they using backticks too? â€, ’, and \’. The charset is supposed to be utf-8 by the page source but something broke somewhere. At least my Firefox shows junk that I'm trying to guess what it means.

0

This will fix the syntax on Alan Corey's message above (thanks Alan!)...and I tested it and it works great!

<img src="test2.jpg" id="reloader" onLoad="setTimeout( () => { document.getElementById('reloader').src='test2.jpg' + '?' + new Date().getMilliseconds() } ,5000)" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.