How to refresh cached image ONCE

  • Thread starter C. (http://symcbean.blogspot.com/)
  • Start date
C

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.
 
W

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
 
J

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
 
S

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
 
T

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
 
J

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.
 
J

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.
 
T

Thomas 'PointedEars' Lahn

Jorge said:
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.

Now I have given you a reason for that.


PointedEars
 
J

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.
 
T

Thomas 'PointedEars' Lahn

Jorge said:
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.

Tough luck.


PointedEars
 
C

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.
 
T

Thomas 'PointedEars' Lahn

C. (http://symcbean.blogspot.com/) said:
I really want the image to be cached client side unless the data used to
create the image (server-side) changes.

That is what cache-controlling headers are for: said:
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
 
J

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.
 
D

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?
 
D

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.
 
J

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.
 
J

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
 
J

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
 
D

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top