image cache causes trouble, setInterval and innerHTML fail, together, to get me a new image

[Jake Barnes]

I've a little webcam program that snaps a picture of me and uploads it
every 20 seconds. It automatically uploads the image to my server. It
always give the image the same name, and thus it overwrites the image
that has been there for the last 20 seconds.

People can, if they wish, hit the refresh button every 20 seconds, but
I thought it would be fun to have a Javascript function that actually
refreshed the image. However, this following function does not refresh
the image. It seems to keep the same image, and never go back to the
server's harddrive to see that the image has changed.

<script type="text/javascript">
function changeFrontImage() {
var htmlString = "<img src='webcam/webcam32.jpg'>";
var imageDiv = document.getElementById("imageDiv");
imageDiv.innerHTML = htmlString;
}
changeFrontImage();
setInterval("changeFrontImage()", 10000);
</script>


I looked at the page using a recent version of IE for PC and FireFox
1.5 (the newest version) for the PC. Both work the first time. I don't
think the function is failing, because when I check
the FireFox Javascript console there are no errors reported related to
this script. But the script doesn't go back to the server's harddrive
to see that the image with the same name has now changed.

Is there a way to turn off the image caching from Javascript?

 

[VK]

Is there a way to turn off the image caching from Javascript?

Replace:
var htmlString = "<img src='webcam/webcam32.jpg'>";

to:
var htmlString = "<img src='webcam/webcam32.jpg?rnd=" + (new
Date()).getTime() + "'>";

Enjoy! ;-)

 

[Jake Barnes]

Replace:
var htmlString = "<img src='webcam/webcam32.jpg'>";

to:
var htmlString = "<img src='webcam/webcam32.jpg?rnd=" + (new
Date()).getTime() + "'>";

Enjoy! ;-)

I've never seen that before. What is rnd?

 

[web.dev]

I've a little webcam program that snaps a picture of me and uploads it
every 20 seconds. It automatically uploads the image to my server. It
always give the image the same name, and thus it overwrites the image
that has been there for the last 20 seconds.

People can, if they wish, hit the refresh button every 20 seconds, but
I thought it would be fun to have a Javascript function that actually
refreshed the image. However, this following function does not refresh
the image. It seems to keep the same image, and never go back to the
server's harddrive to see that the image has changed.

Think about what you've just said. The image only changes (once 20
seconds is up), when you do page refresh. What you're doing however,
is not doing a page refresh, which means you're not sending a request
to retrieve a new image, rather you are just referring to the same
image that has been cached.

<script type="text/javascript">
function changeFrontImage() {
var htmlString = "<img src='webcam/webcam32.jpg'>";
var imageDiv = document.getElementById("imageDiv");
imageDiv.innerHTML = htmlString;
}

Therefore, my proposed solution is this, try reloading the page with
javascript instead.

Try one of these following methods within your function instead:

location.reload();
or
location.href = "pagename.html?";

 

[Evertjan.]

Jake Barnes wrote on 07 dec 2005 in comp.lang.javascript:

I've never seen that before. What is rnd?

just a unused querystring name, could be blah

a webcam could be refrehed that way:

=======================

<img src='/mycam.jpg' id='w'>

..........
window.setInterval('refresh()',4000)
var w = document.getElementById('w')

function refresh(){
w.src = '/mycam.jpg?blah=' + Math.random()
}

===========================

 

[Jake Barnes]

Think about what you've just said. The image only changes (once 20
seconds is up), when you do page refresh. What you're doing however,
is not doing a page refresh, which means you're not sending a request
to retrieve a new image, rather you are just referring to the same
image that has been cached.

Good ideas. Right now it seems to be working in FireFox, but not IE or
anything else. I'll think about what you've said. In this day and age
of AJAX, i'm sure there is a way to reload images.

 

[Jake Barnes]

Jake Barnes wrote on 07 dec 2005 in comp.lang.javascript:

just a unused querystring name, could be blah

a webcam could be refrehed that way:

=======================

<img src='/mycam.jpg' id='w'>

.........
window.setInterval('refresh()',4000)
var w = document.getElementById('w')

function refresh(){
w.src = '/mycam.jpg?blah=' + Math.random()
}

Oh, I get it. Randomly generate a number to create the illusion that a
new item is being sought. Interesting idea.

 

[Evertjan.]

Jake Barnes wrote on 08 dec 2005 in comp.lang.javascript:

Oh, I get it. Randomly generate a number to create the illusion that a
new item is being sought.

It IS a new item in the sense of cashing algoritms, as thos algorithms only
have the URL string to deside if a new download is necessary.

Interesting idea.

This has left that status long time ago,
since it became the standard way of circumventing cashing.