Keep Server Online
If you find the Apache Lounge, the downloads and overall help useful, please express your satisfaction with a donation.
or
A donation makes a contribution towards the costs, the time and effort that's going in this site and building.
Thank You! Steffen
Your donations will help to keep this site alive and well, and continuing building binaries. Apache Lounge is not sponsored.
| |
|
Topic: Folder of images do not refresh |
|
Author |
|
benfringer
Joined: 13 Nov 2019 Posts: 2
|
Posted: Wed 13 Nov '19 23:22 Post subject: Folder of images do not refresh |
|
|
I am using this code
https://www.apachelounge.com/viewtopic.php?t=7995
which works great when displaying one image.
Now I have a folder of images where each image gets overwritten continousy. I am using the following code which works great if I have 1 image in the folder but as soon as the 2nd image is in the folder, the 2 images will display but they are not refreshing
<script language="javascript">
function updateImage() {
obj = document.imagename;
obj.src = obj.src.split("?")[0] + "?" + new Date().getTime();
setTimeout("updateImage()",2000);
}
</script>
<body onload="updateImage();">
<?php
$dirname = "thumbnail_preview";
$images = glob($dirname."/*.png");
foreach($images as $image) {
echo "<img name='imagename' src=".$image."?t=".time().">";
}
?>
</div>
Would anyone know how I can get this fixed?
I have tried many samples of ajax refreshing divs but they all present a flash each time the images get auto refreshed |
|
Back to top |
|
mraddi
Joined: 27 Jun 2016 Posts: 152 Location: Schömberg, Baden-Württemberg, Germany
|
Posted: Thu 14 Nov '19 9:35 Post subject: |
|
|
Hello Ben,
reason for not working with multiple images is, that you have multiple images with the same name. Therefore not a single object but an array is returned within line
obj = document.imagename;
To make it a little easier to understand and to make it clear that the result is an array (see the plural in getElementsByName) I used this:
objs = document.getElementsByName('imagename');
In addition I replaced the setTimeout(...) with a setInterval(...) outside the function so the result reads:
Code: | <html>
<head>
<script type="text/javascript">
function updateImages() {
objs = document.getElementsByName('imagename');
let newDate = new Date().getTime();
for(let i=0;i<objs.length;i++) {
objs[i].src = objs[i].src.split("?")[0] + "?t=" + newDate;
}
}
setInterval("updateImages()",2000);
</script>
</head>
<body>
<?php
$dirname = ".";
$images = glob($dirname."/*.png");
foreach($images as $image) {
echo '<img name="imagename" src="' . $image . '?t=' . time() . '">';
}
?>
</body>
</html> |
Best regards
Matthias |
|
Back to top |
|
benfringer
Joined: 13 Nov 2019 Posts: 2
|
Posted: Thu 14 Nov '19 15:45 Post subject: |
|
|
Thank you so much Matthias.
That works perfectly |
|
Back to top |
|
|
|
|
|
|