javascript html update img src - what's wrong with this?

Question

The code works the first time and the recursive call works but the image does not update. NOTE: The .src does not change - it is just updated in the camera a couple times a second so if I refresh the page it updates but not through the recursive function call - what do I need to do to get it to update? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Image update from cam</title>
        <script type="text/javascript">
            var t;
            function updateimg() {
                document.getElementById('camimg').src = "urlofimgfromcamera - this is valid url";
                t = setTimeout('updateimg()', 2000);
            }
        </script>
    </head>
    <body>
    <img id="camimg" src="" width="1400" alt=""/>
         <script type="text/javascript">
            t = setTimeout('updateimg()', 2000);
         </script>
    </body>
</html>

Works just fine for me, but don't pass strings to `setTimeout`, and why do you keep calling the function recursively, it does the same thing every time — adeneo, Jan 29 '15 at 19:25

score 1 · Accepted Answer · answered Jan 29 '15 at 19:40

1

The image is not updated because it is cached by your browser and you are using the same URL. Try to add a date to your image URL and you should use setInterval instead of recursive calls:

var timer = setInterval(function(){

    var imgUrl = "image.png?v=" + new Date().getTime();
    document.getElementById('camimg').src = imgUrl

},5000);

answered Jan 29 '15 at 19:40

SkyPit

121
4

Someone that has the right answer. GET requests are cached, it will not go to the server to get the new image if the cache headers are there. Adding the timestamp makes it get the new image. – epascarello Jan 29 '15 at 19:49
that was it - the browser was just caching the stinkin' image – jigi Jan 29 '15 at 19:53
I have been about ready to kick my computer - thank you! – jigi Jan 29 '15 at 19:53
been there, this problem can drive you crazy. enjoy. – SkyPit Jan 29 '15 at 20:15
ok - this is on subject now that I've seen behavior - do you know how to clear the cache for the page using javascript? It really builds as the images are cached... or is there some script I can use up front to tell the browsers NOT to cache for the page? – jigi Jan 29 '15 at 21:01
Not from javascript. You can do it by adding meta tag to your HTML or configuring your Web Server. – SkyPit Jan 29 '15 at 21:14

score 0 · Answer 2 · answered Jan 29 '15 at 19:29

As @adeneo pointed, do not pass strings to the setTimeout function, you can even get rid of the parenthesis.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Image update from cam</title>
        <script type="text/javascript">
            var t;
            function updateimg() {
                document.getElementById('camimg').src = "urlofimgfromcamera - this is valid url";
                t = setTimeout(updateimg, 2000);
            }
        </script>
    </head>
    <body>
    <img id="camimg" src="" width="1400" alt=""/>
         <script type="text/javascript">
            t = setTimeout(updateimg, 2000);
         </script>
    </body>
</html>

Passing the string is 100% valid and has nothing to do with the OPs issue. — epascarello, Jan 29 '15 at 19:50

javascript html update img src - what's wrong with this?

2 Answers2