By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,045 Members | 1,367 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,045 IT Pros & Developers. It's quick & easy.

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

P: n/a

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?

Dec 7 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
VK

Jake Barnes wrote:
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! ;-)

Dec 7 '05 #2

P: n/a

VK wrote:
Jake Barnes wrote:
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! ;-)

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

Dec 7 '05 #3

P: n/a

Jake Barnes wrote:
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?";

Dec 7 '05 #4

P: n/a
Jake Barnes wrote on 07 dec 2005 in comp.lang.javascript:

VK wrote:
Jake Barnes wrote:
> 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! ;-)

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()
}

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

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Dec 7 '05 #5

P: n/a

web.dev wrote:
Jake Barnes wrote:
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;
}


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.

Dec 8 '05 #6

P: n/a

Evertjan. wrote:
Jake Barnes wrote on 07 dec 2005 in comp.lang.javascript:
to:
var htmlString = "<img src='webcam/webcam32.jpg?rnd=" + (new
Date()).getTime() + "'>";

Enjoy! ;-)

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()
}


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

Dec 8 '05 #7

P: n/a
Jake Barnes wrote on 08 dec 2005 in comp.lang.javascript:
<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.


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.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Dec 8 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.