How to refresh cached image ONCE

[C. (http://symcbean.blogspot.com/)]

Hi all,

I have an application which generates image graphs. These cache nicely
at the client, however if the user submits more data, I'd like to
force a reload of the image from the server.

I had a google, but all I could find were suggestions to use a varying
query in the URL. This is not a solution to my problem because if I
change the page to do that then ALL the graphs will be reloaded every
time.

I tried

document.getEle mentById("imgs_ id_tag").src.re load():

and

document.getEle mentById("imgs_ id_tag").reload ():

But just got errors.

(If I open JUST the image URL in a browser, I get the cached version,
if I then click on refresh, it goes back to the server to get a new
copy - which is what I want).

Any suggestions?

TIA

C.

[webbugtrack]

you can try this...

var elem = document.getEle mentById("imgs_ id_tag");
var oldSrc = elem.src;
elem.src = oldSrc + '?rnd=' + new Date().getTime( );

This basically says "set the src to the exact same thing, with an
aditional 'random' parameter (current date/time as a number)"

HTH

[Jorge]

On Jul 18, 7:06*pm, "C. (http://symcbean.blogsp ot.com/)"
<colin.mckin... @gmail.comwrote :

Hi all,

I have an application which generates image graphs. These cache nicely
at the client, however if the user submits more data, I'd like to
force a reload of the image from the server.

I had a google, but all I could find were suggestions to use a varying
query in the URL. This is not a solution to my problem because if I
change the page to do that then ALL the graphs will be reloaded every
time.

I tried

document.getEle mentById("imgs_ id_tag").src.re load():

and

document.getEle mentById("imgs_ id_tag").reload ():

But just got errors.

(If I open JUST the image URL in a browser, I get the cached version,
if I then click on refresh, it goes back to the server to get a new
copy - which is what I want).

Any suggestions?

image.src+= "?"+Math.random ();

--Jorge

[Stanislav]

On 18 Jul., 19:06, "C. (http://symcbean.blogsp ot.com/)"
<colin.mckin... @gmail.comwrote :

Hi all,

I have an application which generates image graphs. These cache nicely
at the client, however if the user submits more data, I'd like to
force a reload of the image from the server.

I had a google, but all I could find were suggestions to use a varying
query in the URL. This is not a solution to my problem because if I
change the page to do that then ALL the graphs will be reloaded every
time.

I tried

document.getEle mentById("imgs_ id_tag").src.re load():

and

document.getEle mentById("imgs_ id_tag").reload ():

But just got errors.

(If I open JUST the image URL in a browser, I get the cached version,
if I then click on refresh, it goes back to the server to get a new
copy - which is what I want).

Any suggestions?

TIA

C.

Hi,

You should send right http headers to the client.

More about this: http://developer.yahoo.com/performance/rules.html
under Add an Expires or a Cache-Control Header

;)

Best,
Stanislav

[Thomas 'PointedEars' Lahn]

we*********@gma il.com wrote:

you can try this...

var elem = document.getEle mentById("imgs_ id_tag");

The `images' collection should be used instead:

var elem = document.images["imgs_id_ta g"];

var oldSrc = elem.src;

What for?

elem.src = oldSrc + '?rnd=' + new Date().getTime( );

This basically says "set the src to the exact same thing, with an
aditional 'random' parameter (current date/time as a number)"

Because it is not considered the same thing by the user agent, it will fill
up its cache (if enabled), leaving less space for other, maybe more
important data.

Also, a random value alone is not sufficient; it must be a value that is
unique over a longer period of time, like the timestamp that you suggested.

Cache-controlling HTTP headers are the correct approach instead.

Please do a little research before you post something here.

<http://jibbering.com/faq/>
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

[Jorge]

On Jul 18, 7:50*pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

>
Also, a random value alone is not sufficient;

Yes it is, Thomas, remember that the OP said that he wanted to reload
the image *once*.

it must be a value that is
unique over a longer period of time, like the timestamp that you suggested.

The probability of obtaining the same ramdom number twice in a row is
about 1/(2^(8*8)) === 1/184467440737095 51615
And keeps being almost null even after tens or hundreds of
extractions.

If you want to experiment how long that period of time can be, try
this : it will hang your browser until Math.random() repeats a certain
value :-)

javascript:n= 0, a= Math.random();w hile(a !== Math.random()){ n+
+};alert(n);

--Jorge.

[Jorge]

On Jul 18, 7:50*pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

>
Cache-controlling HTTP headers are the correct approach instead.

Right. Cache-control headers ought to be explicitly setup just for
these images. Agreed.

But the OP was looking for a client-side solution, and that's not.

And the proposed solution will get the image reloaded regardless of
the (cache control) headers sent/received.

Please do a little research before you post something here.

Grrr.

--Jorge.

[Jorge]

On Jul 18, 9:16*pm, Jorge <jo...@jorgecha morro.comwrote:

>
javascript:n= 0, a= Math.random();w hile(a !== Math.random()){ n+
+};alert(n);

On my Mac it took 2,147,483,645 iterations to get "a" repeated.

--Jorge.

[Thomas 'PointedEars' Lahn]

Jorge wrote:

Thomas 'PointedEars' Lahn wrote:

>Cache-controlling HTTP headers are the correct approach instead.

Right. Cache-control headers ought to be explicitly setup just for
these images. Agreed.

But the OP was looking for a client-side solution, and that's not.

| I have an application which generates image graphs. These cache nicely
| at the client, however if the user submits more data, I'd like to
| force a reload of the image from the server.

Not a single word about a client-side only solution.

And the proposed solution will get the image reloaded regardless of
the (cache control) headers sent/received.

The server must send an appropriate expiry value and ETag in the headers,
and the client must refresh the images often enough. If the expiry date was
met, the ETag changed or the resource was not in the cache in the first
place, it would be downloaded (again) from the server; if not, the cache
would be used. ISTM anything else would require a server-push communication
like Comet.

>Please do a little research before you post something here.

Grrr.

Now I have given you a reason for that.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[Jorge]

On Jul 19, 3:48*am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

Jorge wrote:

Thomas 'PointedEars' Lahn wrote:

Cache-controlling HTTP headers are the correct approach instead.

Right. Cache-control headers ought to be explicitly setup just for
these images. Agreed.

But the OP was looking for a client-side solution, and that's not.

| I have an application which generates image graphs. These cache nicely
| at the client, however if the user submits more data, I'd like to
| force a reload of the image from the server.

Not a single word about a client-side only solution.

Does this look like server-side scripting to you : (?)

"I tried document.getEle mentById("imgs_ id_tag").src.re load(): "
"and document.getEle mentById("imgs_ id_tag").reload (): "

(...)
ISTM anything else would require a server-push communication
like Comet.

Duh !

--Jorge.