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.getElementById("imgs_id_tag").src.reload():

and

document.getElementById("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.getElementById("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]

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.getElementById("imgs_id_tag").src.reload():

and

document.getElementById("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]

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.getElementById("imgs_id_tag").src.reload():

and

document.getElementById("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]

you can try this...

var elem = document.getElementById("imgs_id_tag");

The `images' collection should be used instead:

var elem = document.images["imgs_id_tag"];

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

 

[Jorge]

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/18446744073709551615
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();while(a !== Math.random()){n+
+};alert(n);

--Jorge.

 

[Jorge]

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]

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

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

--Jorge.

 

[Thomas 'PointedEars' Lahn]

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.

Grrr.

Now I have given you a reason for that.


PointedEars

 

[Jorge]

| 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.getElementById("imgs_id_tag").src.reload(): "
"and document.getElementById("imgs_id_tag").reload(): "

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

Duh !

--Jorge.

 

[Thomas 'PointedEars' Lahn]

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

"I tried document.getElementById("imgs_id_tag").src.reload(): "
"and document.getElementById("imgs_id_tag").reload(): "

I have noticed that before. So the OP had a problem with their client-side
script for refreshing the image. That does not mean in any way that the
solution must be client-side only.

Duh !

Tough luck.


PointedEars

 

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

I have noticed that before.  So the OP had a problem with their client-side
script for refreshing the image.  That does not mean in any way that the
solution must be client-side only.

Thanks guys - unfortunately it doesn't really solve my proble - I
guess I didn't make it clear enough.

I really want the image to be cached client side unless the data used
to create the image (server-side) changes. I can't really get every
client who has a cached copy to update their cache. Using a dirrent
URI each time by appending a random value just makes the browser think
it is a different image - undermining the caching which is working
fine in most cases:

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.

However, I think it may be possible to do for the client who just
uploaded the data - since, if they click the 'Refresh' button in the
browser it carries out an unconditional reload of the content. I'm
wanting to emulate this from Javascript.

C.

 

[Thomas 'PointedEars' Lahn]

I really want the image to be cached client side unless the data used to
create the image (server-side) changes.

I can't really get every client who has a cached copy to update their
cache.

Why not?

Using a dirrent URI each time by appending a random value just makes the
browser think it is a different image - undermining the caching which is
working fine in most cases:

This is updating the cache in a sense, only that it is filled with mostly
useless information then. You hardly want that.

However, I think it may be possible to do for the client who just
uploaded the data - since, if they click the 'Refresh' button in the
browser it carries out an unconditional reload of the content. I'm
wanting to emulate this from Javascript.

Have you already tried executing

img.src = img.src;

or

var oldsrc = img.src;
img.src = "";
img.src = oldsrc;

in a repetitive setTimeout() while using cache-controlling headers?


PointedEars

 

[Jorge]

However, I think it may be possible to do for the client who just
uploaded the data - since, if they click the 'Refresh' button in the
browser it carries out an unconditional reload of the content. I'm
wanting to emulate this from Javascript.

See here : http://tinyurl.com/6lwmmb

The first & second buttons do what Thomas is proposing.
The 3rd button does a truly "unconditional reload" of the *same* image
file.

Though, you don't seem to want an unconditional reload, because you
don't want the image to be reloaded unless the image content has
changed.
The cache control headers have to be setup properly in order to
achieve this.

But still, in order to trigger the reload, it's unclear to me how is
it going to be discovered client-side, that the image content has
changed at the server-side ?

--Jorge.

 

[Dr J R Stockton]

In comp.lang.javascript message <29d0c3f4-9a1e-4301-81b6-6dc5da5436b9@y3
8g2000hsy.googlegroups.com>, Fri, 18 Jul 2008 12:16:30, Jorge

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


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

No, for two reasons. The generator is not necessarily 64-bit or even
53-bit. In my js-randm.htm, "MSIE 6 and 7 show 53 bits; Firefox 2.0.0.3
shows 52 bits; Opera 9.21 shows 31 bits; Safari 3.1 shows 31 bits."
And, as the generator is only pseudo-random, it should not repeat until
after a full cycle.

What does that page report (for various browsers?) on your Mac?

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>, Fri,

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.

In most browser instances, Math.random can be shown to give 53 bits of
pseudo-randomness, although the initial value's randomness depends on
the quality of the initialisation.

Machines connected to the Internet generally resynchronise from time to
time with an Internet or server clock. Nearly 50% of computers will
need to be set back in time, and in the case of those which cannot be
slowed or stopped but must jump back it will be necessary to repeat a
certain amount of internal-clock time. So new Date().getTime() may
give the same value after an interval as it did before. That will not
often happen, but ISTM likely to happen more often than the repeat of a
good RNG, let alone of a a PRNG which will cycle through all possible
values before repeating.


Recommending adjusting HTTP headers as opposed to adjusting the 'URL' is
not helpful to those whose servers do not allow header control.
Professional servers should allow it; those available to many of the
amateurs who read this group may very well not do so.

Please do a little research before you post something here.

Please think before you post something here.

 

[Jorge]

No, for two reasons.  The generator is not necessarily 64-bit or even
53-bit.  In my js-randm.htm, "MSIE 6 and 7 show 53 bits; Firefox 2.0.0.3
shows 52 bits; Opera 9.21 shows 31 bits; Safari 3.1 shows 31 bits."
And, as the generator is only pseudo-random, it should not repeat until
after a full cycle.

Yes you're right. In fact Safari's PRNG always repeats at n=
2,147,483,645 (-> 2^31) (don't tell Thomas

What does that page report (for various browsers?) on your Mac?

"Apparent resolution is at least 30 bits."

Thanks,
--Jorge.

 

[Jorge]

What does that page report (for various browsers?) on your Mac?

On a Mac :

Webkit r34974: "Apparent resolution is at least 30 bits."
Safari 3.1.2: "Apparent resolution is at least 30 bits."

Opera 9.51: "Apparent resolution is at least 31 bits."

Navigator 9.0.0.3: "Apparent resolution is at least 52 bits."
Camino 1.6.1: "Apparent resolution is at least 52 bits."
FF 2.0.0.16: "Apparent resolution is at least 52 bits."
FF 3.1: "Apparent resolution is at least 52 bits."

IE 5.2: "Apparent resolution is at least 53 bits."

iCab 3.0.5 : "Apparent resolution is at least 58 bits."

--Jorge

 

[Jorge]

What does that page report (for various browsers?) on your Mac?

On a Mac :
Webkit r34974: "Apparent resolution is at least 30 bits."
Safari 3.1.2: "Apparent resolution is at least 30 bits."

Opera 9.51: "Apparent resolution is at least 31 bits."

Navigator 9.0.0.3: "Apparent resolution is at least 52 bits."
Camino 1.6.1: "Apparent resolution is at least 52 bits."
FF 2.0.0.16: "Apparent resolution is at least 52 bits."
FF 3.1: "Apparent resolution is at least 52 bits."

IE 5.2.3: "Apparent resolution is at least 53 bits."

iCab 3.0.5: "Apparent resolution is at least 58 bits."

--Jorge

 

[Dr J R Stockton]

In comp.lang.javascript message <c9681dae-4958-410e-993b-86bb9eeddd00@l4
2g2000hsc.googlegroups.com>, Sat, 19 Jul 2008 12:37:21, Jorge

iCab 3.0.5: "Apparent resolution is at least 58 bits."

That one was initially rather unexpected, since Math.random() is
supposed to return an evenly-distributed IEEE Double with an effective
53-bit mantissa, and the best previously seen or reported was 53 bits.

ISO/IEC 16262 only requires that the result of Math.random() be evenly
distributed, not that the resolution be independent of the value.

It appears that other browsers in effect mask the output of the
(64-bit?) PRNG to 53 bits before converting to Double, while iCab does
that only within the conversion itself.

It seems undesirable for there to be unnecessary numerical differences
between browsers; if anyone has contact with those writing future
specifications, then I suggest that they ask for the future spec to have
this uncertainty removed. While iCab in a sense has better randomness,
ISTM that uniformity would be preferable.

The function you observed, Resol, is now Resol1; new Resol3 is similar
but uses only randoms >= 0.5.