Question

my webcam uploads an image to my site every 10 seconds and names it live.jpg … I’m looking for a way to refresh the image every 10 seconds ( to show the latest image ) but the image is getting cached and not updating. Here is the old javascript I’m using that isn’t working…. is there an easy modification that could be made to it to get around caching the image? Thanks very much for any suggestions:

<script type="text/javascript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 10000

// Duration of crossfade (seconds)
var crossFadeDuration = 1

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'http://www.examplesite.com/live.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

Answer 1

add a changing parameter to the image-url, e.g. a timestamp:

document.images.SlideShow.src = preLoad[j].src+'?'+new Date().getTime();