Question

I’m having trouble with my javascript.
I want to refresh an image(not a whole page) every 1 second, but that doesn’t seem to work.
So this Javascript:

<script type="text/javascript">

            <!--

            function reloadpic()
            {

             document.images["camimage"].src = "test.jpg";
             setTimeout("reloadpic();", 1000);
            }

            onload = reloadpic;

             -->
    </script>

and this in my body:

<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<img src="test.jpg"  id="camimage" name="camimage"  alt="info"></img>
<!-- END OF THE PLAYER EMBEDDING -->

Does it refresh your whole page or only your picture with id: camimage?

As now, i have an issue. I have an image test.jpg that only change in bytes (when a new picture is uploaded). But how do I automaticcally refresh it?

Answer 1

Your browser will cache the image, making it impossible to re-download the image.

Except for if you would change the filename, but I assume that cannot be done, so you can always add something like a timestamp appended to the source of the image. This has nothing to do with the filename of the image, check the ?.

<script type="text/javascript">

        <!--

        function reloadpic()
        {
         var timestamp = new Date().getTime();
         document.images["camimage"].src = "test.jpg?random=" + timestamp;
         setTimeout("reloadpic();", 1000);
        }

        onload = reloadpic;

         -->
</script>