Persistency of cached images

[DamianS]

I'm doing animations with javascript whereby the mouseover event initiates a series of image writes to a spot, simulating simple animation.
I preload the images first.

It works ok, but my query is this:
The next time the user loads the page, does the browser download all the images again, or does it use the images (presumably) stored in its cache?

If the browser uses the cached images, is there a way by using javascript, to force the user's browser to redownload the images?

[phranque]

you could use a cache control directive to either prevent the image from cacheing or to force revalidation of the image regardless of cache.
there are also http headers that will control cache expiration.

not sure what the best javascript solution is but this may be a good place to start to understand what you are trying to affect:
[w3.org...]

maybe you can send some appropriate request headers using javascript...

[penders]

The next time the user loads the page, does the browser download all the images again, or does it use the images (presumably) stored in its cache?

I would have said that by default, the images should be pulled in from the Cache in subsequent page requests.

Altering the caching of pages using http headers, such as in the HTML...

<meta http-equiv="expires" content="-1"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache">

...Will effect the caching of the entire page, not just the select few images used in your animation.

Do your animated images change frequently? Is there a reason to prevent caching?

To target just the frames of your animation, you could try adding a query string to your image filenames, which includes a date stamp, in your JavaScript preloading function... eg:

....= "frame1.gif?20061203";

When the query string (?20061203) changes, then the image should be downloaded a fresh, as it shouldn't be found in the cache. The filename itself still remains as 'frame1.gif'.

[DamianS]

hmm thanks for your replies.
What I am trying to do, is develop games using animation of pseudo-3D images involving javascript and some form of push-pulling by the server aka Ajax.

ATM, each page will have between 500k and 1M of images consisting of dozens of .png images with alpha data to aid in overlaying onto a moving background. So far, my experiments indicate this will work sufficiently well with very little flicker.

But I'm concerned that if a user has configured his/her browser not to cache images, they could be reloaded each time the page reloads 30 times a second. Apart from the bandwidth abuse, this would play havoc with the latency experienced by other players.

Those cache-control settings on the w3.org page look extremely comprehensive, but will all browsers obey them strictly?
Can the server categorically override any browser, regardless of the settings, and force them to cache all the images, or reload them, as is necessary?
I'm guessing the wild card will be IE. I would imagine Firefox and Opera and Safari will be better-behaved.

[edited by: DamianS at 10:19 am (utc) on Dec. 4, 2006]

[penders]

But I'm concerned that if a user has configured his/her browser not to cache images...

Can a user completely disable the cache in their browser?! They can certainly reduce the size of their cache.... to zero?

The default action of the browser is to cache. If caching is 'somehow' disabled in the browser, then I very much doubt there is a way to enable it via script? The only reason to send HTTP headers, related to caching is to disable it, temporarily, for the page.

...each page will have between 500k and 1M of images ... they could be reloaded each time the page reloads 30 times a second.

Cor, that's alot of pretty gfx! "each page"? How many 'pages' (or is that frames?) do you have? Are you sending all the images down the AJAX tube - fresh images 30 times a second?! Are your images constantly changing? I assume not, since you are talking about caching. I would have thought that once the images are client side, they would cache, or be held in some kind of JS memory structure?

Best of luck with the game! I would be interested to have a gander/test any experiments you might have - just PM me.

[DamianS]

The default action of the browser is to cache. If caching is 'somehow' disabled in the browser, then I very much doubt there is a way to enable it via script? The only reason to send HTTP headers, related to caching is to disable it, temporarily, for the page.

Well, if the worst comes to the worst, the server can kick players who have disabled or prevented cacheing.

Cor, that's alot of pretty gfx! "each page"? How many 'pages' (or is that frames?) do you have?

About 5-6 pages will be animation/gameplay pages.
Each gfx is a sprite.
I'm basically trying to do with Ajax what was done with the old arcade machines, and the old comptuters eg. C64, before Windows took over.

Are you sending all the images down the AJAX tube - fresh images 30 times a second?!

Nope. All the images will be preloaded with JS unless they have been preloaded already.

Are your images constantly changing? I assume not, since you are talking about caching. I would have thought that once the images are client side, they would cache, or be held in some kind of JS memory structure?

Ahh! Are JS image caches independant of the browser caches?
If so, my problem is solved.

Best of luck with the game! I would be interested to have a gander/test any experiments you might have - just PM me.

Sure will. But its a long way away yet. I'm still very much a noob - just started learning JS, only learnt php 6 months ago, and havent even studied ajax yet.
I'm wrestling with dealing with multiple sessions at the moment. :/
When thats finished, I'll get back to the graphics side of things.

[edited by: DamianS at 1:13 am (utc) on Dec. 8, 2006]