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

Discussion in 'Javascript' started by Jake Barnes, Dec 7, 2005.

  1. Jake Barnes

    Jake Barnes Guest

    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?
     
    Jake Barnes, Dec 7, 2005
    #1
    1. Advertising

  2. Jake Barnes

    VK Guest

    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! ;-)
     
    VK, Dec 7, 2005
    #2
    1. Advertising

  3. Jake Barnes

    Jake Barnes Guest

    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?
     
    Jake Barnes, Dec 7, 2005
    #3
  4. Jake Barnes

    web.dev Guest

    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?";
     
    web.dev, Dec 7, 2005
    #4
  5. Jake Barnes

    Evertjan. Guest

    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)
     
    Evertjan., Dec 7, 2005
    #5
  6. Jake Barnes

    Jake Barnes Guest

    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.
     
    Jake Barnes, Dec 8, 2005
    #6
  7. Jake Barnes

    Jake Barnes Guest

    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.
     
    Jake Barnes, Dec 8, 2005
    #7
  8. Jake Barnes

    Evertjan. Guest

    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)
     
    Evertjan., Dec 8, 2005
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wenjie

    if (f() != FAIL) or if (FAIL != f())?

    Wenjie, Jul 28, 2003, in forum: C Programming
    Replies:
    3
    Views:
    479
    E. Robert Tisdale
    Jul 31, 2003
  2. jason9364
    Replies:
    0
    Views:
    879
    jason9364
    Nov 19, 2007
  3. Weston C

    Trouble using setTimeout/setInterval

    Weston C, Feb 22, 2004, in forum: Javascript
    Replies:
    1
    Views:
    208
    Lasse Reichstein Nielsen
    Feb 22, 2004
  4. sonic
    Replies:
    5
    Views:
    311
    Randy Webb
    Jul 11, 2006
  5. Camet

    innerHTML causes runtime error

    Camet, Jul 11, 2006, in forum: Javascript
    Replies:
    0
    Views:
    99
    Camet
    Jul 11, 2006
Loading...

Share This Page