Auto refresh images in HTML

Viewed 70659

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

4 Answers

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

Related