Reloading a server-generated image file

[encyclo]

I need to reload an image on a page without refreshing the page itself.

My scenario is that I have a PHP-generated image file called "fimg.php", that I would like to reload every 10 seconds. I've tried the usual "rotate images" scripts, but they all work with an array, and in this case the file name never changes.

This must be easy, but unfortunately my Javascript skills are severely lacking. :) What's the simplest way of doing this?

One other twist - Netscape 4.x compatibility is desireable, although not absolutely vital. However, the image must be visible (but missing the refresh) with Javascript disabled, this for accessibility reasons.

Thanks for any help. :)

[RonPK]

<img src="fimg.php" id="myImage"> 
  
<script type="text/javascript"> 
function reloadImage() { 
 var myDate = new Date(); 
 img.src = 'http://www.example.com/fimg.php?t=' + myDate.getTime(); 
} 
if (document.getElementById) { 
 var img = document.getElementById('myImage'); 
 window.setInterval('reloadImage()', 10000); // milliseconds 
} 
</script> 

setInterval()

executes code at a set interval (duh..)

myDate.getTime()

returns the current timestamp, which should prevent caching issues.

edit: added testing for Netscape 4, which doesn't support

getElementById()

.

[edited by: RonPK at 8:31 pm (utc) on Mar. 11, 2007]

[RonPK]

Here's a script that might actually work in NN4 as well:

<img src="fimg.php" name="myImage" alt="alternative description"> 
  
<script type="text/javascript"> 
function reloadImage() { 
 var myDate = new Date(); 
 document.myImage.src = 'http://www.example.com/fimg.php?t=' + myDate.getTime(); 
} 
window.setInterval('reloadImage()', 10000); // milliseconds 
} 
</script> 

The name property is so prehistoric that I almost forgot it still exists ;)

edit: added the alt-attribute, for accessibility reasons :-)

[edited by: RonPK at 8:57 pm (utc) on Mar. 11, 2007]

[encyclo]

Thanks RonPK, that's just perfect. I had the

getElementById

but my syntax was messed up. ;) The time stamp idea is perfect for ensuring fresh images, although as the image was generated it shouldn't have any cache headers sent.

The NN4 requirement, by the way, was because this is a modification to an old site where the functional requirements demanded it in the original contract. As long as it doesn't break NN4 (which the test for

getElementById

fixes) then I can justify it to the client, and anyway they've got rid of all their NN4 machines now so I doubt they'd notice! I'll keep your second example ready as backup, but if it works in Safari I think they'll be satisfied.