...

View Full Version : Resolved Possible to stop images caching with js?



cartoongeorge96
09-01-2011, 10:29 PM
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:


<!-- 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

dotnetmind
09-01-2011, 10:55 PM
A simple solution to this problem , is to add a randomly generated query string to each request for the dynamic image.


<img src="image.png" />

Would become


<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.

Old Pedant
09-01-2011, 10:56 PM
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.


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.

Old Pedant
09-01-2011, 10:59 PM
Hah! DotNet is faster, but I'm slower. Oh, and longer. <grin/>

Old Pedant
09-01-2011, 11:07 PM
I'm also very inaccurate.

Corrected version:


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?)

cartoongeorge96
09-02-2011, 12:19 PM
A simple solution to this problem , is to add a randomly generated query string to each request for the dynamic image.


<img src="image.png" />

Would become


<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 :)


I'm also very inaccurate.

Corrected version:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum