Auto refresh of page not working when getting all images from a folder

JavaScript
1

Hi,

I am capturing a few streams and converting each stream into a thumbnail. Each thumbnail stream is stored in its own image name. Meaning there is 1 image file for each stream and just getting over written every 5 seconds. I have a page that displays these thumbnails and auto refreshes without blinking. The following code works great for just 1 stream but once other streams start to get into the folder, the page no longer refreshes

    <script>
    function updateImage() {
    obj = document.imagename;
    obj.src = obj.src + "?" + Math.random();
    setTimeout("updateImage()",2000);
    }
    </script>

    <body onload="updateImage();">
    <?php  
    $dirname = "thumbnails/";
    $images = glob($dirname."/*.png");

    foreach($images as $thumbs) {
    echo "<img name=imagename src=".$thumbs."?t=".time().">";
    }
    ?>
    </body>

I am a JS novice and would be gratefull if someone can tell me what is wrong

2

Hi @benfringer and a warm welcome to the forum.

The script will insert a double right hand slash, try removing one and see it it makes a difference.

3

HI John,

removing the double slash did not improve. Images are not getting updated.

4

I added an alert inside the JavaScript function and it was not called?

I moved the onload="updateImage();" to inside PHP for/next loop and the alert functions was still not called?

That is about the total extent of my JavaScript knowledge, hopefully a JavaScript expert can suggest solutions :frowning:

I must add that it seems strange that a delay is required, most of the time displaying images without any delay is normal?

5

Hi @benfringer, you’re always just updating the first image with the name imagename; if you want to update all images you’ll have to loop over them. Also note that you’re appending another query parameter each time, rather than replacing the existing one; so you might store the actual “base” source in a data attribute instead:

<img data-src="foo.png" alt="foo">
<img data-src="bar.png" alt="bar">
...

<script>
var images = document.querySelectorAll('[data-src]')

function updateImages () {
  images.forEach(function (image) {
    image.src = image.dataset.src + '?hash=' + Math.random()
  })

  window.setTimeout(updateImages, 2000)
}

updateImages()
</script>
1 Like
7

Hi everyone, I got this fixed with the following code

<script language="javascript">
function updateImage() {
obj = document.imagename;
obj.src = obj.src.split("?")[0] + "?" + new Date().getTime();
setTimeout("updateImage()",2000);
}

</script>

Since I was getting an array returned, the problem was with the line
obj = document.imagename; as it was expecting an object

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.