updating images in JavaScript animation

[billrdio]

I am trying to make a JavaScript animation of real-time images - i.e.
images that will periodically change on the server. The problem I am
having is that the JavaScript animation I have created is always using
the images from the cache, even though I have set the HTTP response
header on the server (via .htaccess) so that the browser should
validate the image in the cache against the image on the server for
freshness. I have tested the HTTP response headers I am using and
they are working in other instances on the same server, so I am not
sure what I am doing wrong.

As to how my animation works, basically, I load a page with an image
on it and the image has an onLoad event handler that runs a JavaScript
function. The JavaScript function then figures out which image needs
to be displayed next, then does a preload on it (i.e. img=new Image;
img.src=imgSrc;) and then does a
window.setTimeout to change the src of the image
(i.e. document.images["img"].src=page;) in X seconds. I suspect that
what is happening is that the whole business of preloading the image
using JavaScript and changing the src of the image using JavaScript
doesn't involve making an actual request to the server, since I am not
reloading the page, and therefore the HTTP response headers I set on
the server aren't being applied.

My question is this: does anyone know of a general method for making a
JavaScript animation that will display the new versions of images
(same file names) when they have changed on the server?

[Marek Mänd]

billrdio wrote:

I am trying to make a JavaScript animation of real-time images - i.e.
images that will periodically change on the server. The problem I am
having is that the JavaScript animation I have created is always using
the images from the cache, even though I have set the HTTP response
header on the server (via .htaccess) so that the browser should
validate the image in the cache against the image on the server for
freshness.

path = 'www.www.ww/img.gif'
myImage = new Image(100,100);
myImage.src =path + '?' + Mat.random+newDate()

[billrdio]

Unfortunately, I already tried something like this. It works, but it
causes the browser to progressively use up more and more memory and
become unstable. At least with Netscape 7.1 on XP. I was testing
this with a 3 image animation that took only 20 seconds or so to go
through an entire loop, and after a few minutes, the browser locked
up. Maybe that isn't a fair test due to the shortness of the loop,
but what I think I need to do is force the browser to check the image
in the cache against the image on the server and replace the image in
the cache with the image on the server if it is newer - the HTTP
response headers that I have tried make this happen, but only if you
are reloading the page - they don't seem to have any effect if you are
preloading the image via JavaScript and then changing the src
attribute of the image to the next image in the loop via JavaScript.
Appending a "?string" to the end of the image file name will force the
browser to preload a new image, but then it will never use it's cache
and will continue to load "new" images everytime - I want it to use
images from the cache if they are still "fresh".

Marek Mänd <ca********@mail.ee> wrote in message news:<2u*************@uni-berlin.de>...

billrdio wrote:

I am trying to make a JavaScript animation of real-time images - i.e.
images that will periodically change on the server. The problem I am
having is that the JavaScript animation I have created is always using
the images from the cache, even though I have set the HTTP response
header on the server (via .htaccess) so that the browser should
validate the image in the cache against the image on the server for
freshness.

path = 'www.www.ww/img.gif'
myImage = new Image(100,100);
myImage.src =path + '?' + Mat.random+newDate()