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

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?

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

Jake Barnes wrote:[color=blue]
> Is there a way to turn off the image caching from Javascript?[/color]

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

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

Enjoy! ;-)

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

VK wrote:[color=blue]
> Jake Barnes wrote:[color=green]
> > Is there a way to turn off the image caching from Javascript?[/color]
>
> Replace:
> var htmlString = "<img src='webcam/webcam32.jpg'>";
>
> to:
> var htmlString = "<img src='webcam/webcam32.jpg?rnd=" + (new
> Date()).getTime() + "'>";
>
> Enjoy! ;-)[/color]


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

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

Jake Barnes wrote:[color=blue]
> 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.[/color]

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.
[color=blue]
> <script type="text/javascript">
> function changeFrontImage() {
> var htmlString = "<img src='webcam/webcam32.jpg'>";
> var imageDiv = document.getElementById("imageDiv");
> imageDiv.innerHTML = htmlString;
> }[/color]

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?";

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

Jake Barnes wrote on 07 dec 2005 in comp.lang.javascript:
[color=blue]
>
> VK wrote:[color=green]
>> Jake Barnes wrote:[color=darkred]
>> > Is there a way to turn off the image caching from Javascript?[/color]
>>
>> Replace:
>> var htmlString = "<img src='webcam/webcam32.jpg'>";
>>
>> to:
>> var htmlString = "<img src='webcam/webcam32.jpg?rnd=" + (new
>> Date()).getTime() + "'>";
>>
>> Enjoy! ;-)[/color]
>
>
> I've never seen that before. What is rnd?[/color]

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)

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

web.dev wrote:[color=blue]
> Jake Barnes wrote:[color=green]
> > 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.[/color]
>
> 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.
>[color=green]
> > <script type="text/javascript">
> > function changeFrontImage() {
> > var htmlString = "<img src='webcam/webcam32.jpg'>";
> > var imageDiv = document.getElementById("imageDiv");
> > imageDiv.innerHTML = htmlString;
> > }[/color][/color]



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.

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

Evertjan. wrote:[color=blue]
> Jake Barnes wrote on 07 dec 2005 in comp.lang.javascript:[color=green][color=darkred]
> >> to:
> >> var htmlString = "<img src='webcam/webcam32.jpg?rnd=" + (new
> >> Date()).getTime() + "'>";
> >>
> >> Enjoy! ;-)[/color]
> >
> >
> > I've never seen that before. What is rnd?[/color]
>
> 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()
> }[/color]

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

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

Jake Barnes wrote on 08 dec 2005 in comp.lang.javascript:
[color=blue][color=green]
>> <img src='/mycam.jpg' id='w'>
>>
>> .........
>> window.setInterval('refresh()',4000)
>> var w = document.getElementById('w')
>>
>> function refresh(){
>> w.src = '/mycam.jpg?blah=' + Math.random()
>> }[/color]
>
> Oh, I get it. Randomly generate a number to create the illusion that a
> new item is being sought.[/color]

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.
[color=blue]
> Interesting idea.[/color]

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)