Auto refresh images in HTML

html, javascript

Solution

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
}

Problem

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

Original source