Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Surrey United Kingdom
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Possible to stop images caching with js?

    Hello,

    I run a webcam streaming site, and has a gallery of images saved every hour every 24 hours, the thumbnails dont seem to change much (?) so wondered if there was a way to stop caching using a javascript . . . script?

    This is what im dealing with:

    Code:
    <!-- timeshots -->
    <div id="Html4" style="position:absolute;overflow:auto;left:286px;top:557px;width:455px;height:180px;z-index:10">
    <a href="http://server.mysite.com/snapshots/00.jpg" rel="lightbox" title="GardenCam at 12:00am"><img src="http://server.mysite.com/snapshots/00-thumbnail.jpg" /></a>
    
    <a href="http://server.mysite.com/snapshots/01.jpg" rel="lightbox" title="GardenCam at 1:00am"><img src="http://server.mysite.com/snapshots/01-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/02.jpg" rel="lightbox" title="GardenCam at 2:00am"><img src="http://server.mysite.com/snapshots/02-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/03.jpg" rel="lightbox" title="GardenCam at 3:00am"><img src="http://server.mysite.com/snapshots/03-thumbnail.jpg" /></a>
    <p>
    <a href="http://server.mysite.com/snapshots/04.jpg" rel="lightbox" title="GardenCam at 4:00am"><img src="http://server.mysite.com/snapshots/04-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/05.jpg" rel="lightbox" title="GardenCam at 5:00am"><img src="http://server.mysite.com/snapshots/05-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/06.jpg" rel="lightbox" title="GardenCam at 6:00am"><img src="http://server.mysite.com/snapshots/06-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/07.jpg" rel="lightbox" title="GardenCam at 7:00am"><img src="http://server.mysite.com/snapshots/07-thumbnail.jpg" /></a>
    <p>
    <a href="http://server.mysite.com/snapshots/08.jpg" rel="lightbox" title="GardenCam at 8:00am"><img src="http://server.mysite.com/snapshots/08-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/09.jpg" rel="lightbox" title="GardenCam at 9:00am"><img src="http://server.mysite.com/snapshots/09-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/10.jpg" rel="lightbox" title="GardenCam at 10:00am"><img src="http://server.mysite.com/snapshots/10-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/11.jpg" rel="lightbox" title="GardenCam at 11:00am"><img src="http://server.mysite.com/snapshots/11-thumbnail.jpg" /></a>
    <p>
    <a href="http://server.mysite.com/snapshots/12.jpg" rel="lightbox" title="GardenCam at 12:00pm"><img src="http://server.mysite.com/snapshots/12-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/13.jpg" rel="lightbox" title="GardenCam at 1:00pm"><img src="http://server.mysite.com/snapshots/13-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/14.jpg" rel="lightbox" title="GardenCam at 2:00pm"><img src="http://server.mysite.com/snapshots/14-thumbnail.jpg" /></a>
    
    <a href="http://server.mysite.com/snapshots/15.jpg" rel="lightbox" title="GardenCam at 3:00pm"><img src="http://server.mysite.com/snapshots/15-thumbnail.jpg" /></a>
    <p>
    <a href="http://server.mysite.com/snapshots/16.jpg" rel="lightbox" title="GardenCam at 4:00pm"><img src="http://server.mysite.com/snapshots/16-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/17.jpg" rel="lightbox" title="GardenCam at 5:00pm"><img src="http://server.mysite.com/snapshots/17-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/18.jpg" rel="lightbox" title="GardenCam at 6:00pm"><img src="http://server.mysite.com/snapshots/18-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/19.jpg" rel="lightbox" title="GardenCam at 7:00pm"><img src="http://server.mysite.com/snapshots/19-thumbnail.jpg" /></a>
    <p>
    <a href="http://server.mysite.com/snapshots/20.jpg" rel="lightbox" title="GardenCam at 8:00pm"><img src="http://server.mysite.com/snapshots/20-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/21.jpg" rel="lightbox" title="GardenCam at 9:00pm"><img src="http://server.mysite.com/snapshots/21-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/22.jpg" rel="lightbox" title="GardenCam at 10:00pm"><img src="http://server.mysite.com/snapshots/22-thumbnail.jpg" /></a>
    <a href="http://server.mysite.com/snapshots/23.jpg" rel="lightbox" title="GardenCam at 11:00pm"><img src="http://server.mysite.com/snapshots/23-thumbnail.jpg" /></a></div>
    <!-- gardencamscript -->
    A few suggestions would be nice, or if you could modify the code slightly?

    Many thanks

    george
    Last edited by WA; 07-12-2012 at 03:49 AM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    50
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Stop caching images

    A simple solution to this problem , is to add a randomly generated query string to each request for the dynamic image.

    Code:
    <img src="image.png" />
    Would become

    Code:
    <img src="image.png?dummy=1100" />
    In the web-server the same file is accessed, but from the point of view of the browser no caching can be performed.
    Don't forget to mark solution providing post as "Answered".
    It helps others to find correct solutions!

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Well, a sneaky way is to simply tag the end of each URL with something like ?randomstring or maybe ?currenttime

    SO if you use JS to create the HTML, you could tack that on.
    Code:
    SEE CORRECTED VERSION
    <script type="text/javascript">
    var now = (new Date()).getTime();
    for ( var t = 0; t <= 23; ++t )
    {
        var tm = t == 0 ? "12:00am" ? t < 12 ? t + ":00am" : t == 12 ? "12:00pm" : (t-12) + ":00pm";
        var phnum = t < 10 ? "0" + t : t;
        document.write( 
            '<a href="http://mysite.com/snapshots/' + phnum + '01.jpg?' + tm + '" "
          +     ' rel="lightbox" title="GardenCam at ' + tm + '">'
          + '<img src="http://mysite.com/snapshots/' + phnum + '-thumbnail.jpg? + tm + '" /></a>'
        );
        if ( t % 4 == 3 ) document.write("<p>"); // really should use <br/> instead of <p> nowadays
    }
    </script>
    This assumes that the gardencam.com server ignores the stuff from the ? onwards in the image URL. I think most servers will, but I can't speak for all of them. Certainly, with an Apache server, even it won't ignore it naturally you can create a URL re-write rule that would do the job.

    EDIT: Added in the <p> tag every 4th thumbnail.

    And if it's not obvious, that generates all 24 images/links.
    Last edited by WA; 07-12-2012 at 03:49 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Hah! DotNet is faster, but I'm slower. Oh, and longer. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    I'm also very inaccurate.

    Corrected version:
    Code:
    var now = (new Date()).getTime();
    for ( var t = 0; t <= 23; ++t )
    {
        var tm = t == 0 ? "12:00am" : t < 12 ? t + ":00am" : t == 12 ? "12:00pm" : (t-12) + ":00pm";
        var phnum = t < 10 ? "0" + t : t;
        document.write( 
            '<a href="http://mysite.com/snapshots/' + phnum + '.jpg?' + now + '" '
          +     ' rel="lightbox" title="GardenCam at ' + tm + '">'
          + '<img src="http://mysite.com/snapshots/' + phnum + '-thumbnail.jpg?' + now + '" /></a>'
        );
        if ( t % 4 == 3 ) document.write("<p>"); 
    }
    Tested. Works. (Who turned on the porch light at 10PM?)
    Last edited by WA; 07-12-2012 at 03:49 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Sep 2011
    Location
    Surrey United Kingdom
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dotnetmind View Post
    A simple solution to this problem , is to add a randomly generated query string to each request for the dynamic image.

    Code:
    <img src="image.png" />
    Would become

    Code:
    <img src="image.png?dummy=1100" />
    In the web-server the same file is accessed, but from the point of view of the browser no caching can be performed.
    Thank you dotnetmind, although i would have no idea how to do this :L

    Quote Originally Posted by Old Pedant View Post
    I'm also very inaccurate.

    Corrected version:
    Code:
    var now = (new Date()).getTime();
    for ( var t = 0; t <= 23; ++t )
    {
        var tm = t == 0 ? "12:00am" : t < 12 ? t + ":00am" : t == 12 ? "12:00pm" : (t-12) + ":00pm";
        var phnum = t < 10 ? "0" + t : t;
        document.write( 
            '<a href="http://mysite.com/snapshots/' + phnum + '.jpg?' + now + '" '
          +     ' rel="lightbox" title="GardenCam at ' + tm + '">'
          + '<img src="http://mysite.com/snapshots/' + phnum + '-thumbnail.jpg?' + now + '" /></a>'
        );
        if ( t % 4 == 3 ) document.write("<p>"); 
    }
    Tested. Works. (Who turned on the porch light at 10PM?)
    PERFECT!! Thanks Pendant, You even added it in for me!! haha the light at 10pm is actually a motion detection flood light, so maybe a cat or somthing.

    Thanks Again very much

    (Ps) i need to learn javascript, i have no idea what any of that code means :L
    Last edited by WA; 07-12-2012 at 03:50 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •