CODEWITHSUNDEEP
javascripthtml
Rohit
Rohit

Reputation: 2681

Auto refresh images in HTML

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

Upvotes: 13

Views: 76427

Answers (4)

Greg Davis
Greg Davis

Reputation: 1

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

Upvotes: 0

Alan Corey
Alan Corey

Reputation: 611

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.

Upvotes: 0

Trojan
Trojan

Reputation: 2254

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

Upvotes: 18

Voonic
Voonic

Reputation: 4775

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
}

Upvotes: 10

Related Questions