(Site Identification)

'Eye' Focus: Web Support Tutorials

WebCam 'Image' AutoReloader

This special JavaScript is the CORRECT way to refresh timely or dynamic images on a web page, such as webcam images. Most web developers use the archaic page 'refresh' method which causes the entire page to reload, instead of just the image. This script updates only the image, not the whole web page. Its faster and will not disturb your reading of the page.

The WebCam image displayed below will update every 60 seconds. The script also updates the image's alternative text and the division's title text (seen with a mouseover on the image). The updated text provides contextual information on the content changes in the document.

This WebCam image of the Portland Oregon Airport comes from the KATU WebCam service. Though the JavaScript updates the image every minute, I believe that the KATU site does not update the image but once every five minutes.

KATU, Portland Oregon Airport.

(to Top) Document Header Code

This portion goes in the HEAD of the page, without changes: (skip code)

<script language="JavaScript" type="text/javascript"><!--
// AutoReloader: used to reload images that change periodically (i.e. WebCams)
// written by Melvin Waller Jr (www.melvinwallerjr.com) 9/1/02
function AutoReloader(picName, picSource) { // HTML name, IMG src
 if (document.images && document.images[picName]) { // test for script support
  var day = new Date(); // current date and time
  var n = day.getYear() + day.getMonth() + day.getDate() + day.getTime();
  var tag = document.images[picName]; // shortcut the original image object
  var newPic = new Image(tag.width, tag.height); // create image instance
  var ary = picSource.split("?pic", 1); // get image address
  newPic.src = ary[0] + "?pic" + n; // load new image with query
  tag.src = newPic.src; // display new image
  var txt = "Web camera image for "
   + day.getMonth() + "/" + day.getDate() + "/" + day.getYear() + " at "
   + day.getHours() + ":" + ((day.getMinutes() < 10)? "0":"") + day.getMinutes()
   + ":" + ((day.getSeconds() < 10)? "0":"") + day.getSeconds() + ".";
  tag.alt = txt; tag.parentNode.title = txt; // update image and div text
 }
}
function updatePic(picName, picSource, timer) { // HTML name, IMG src, time in seconds
 setInterval("AutoReloader('" + picName + "','" + picSource + "')", timer*1000);
}
// --></script>

(to Top) Document Body Code

This portion goes in the BODY of the page, changes defined below: (skip code)

<p align="center" title="Web camera image."><img alt="Web camera image."
src="ImageSource" name="UniqueName" width="ImageWidth" height="ImageHeight"
onload="updatePic(this.name,this.src,RefreshTime);"></p>

This code portion can be repeated in the page as many times as needed, adjusting the code for each image as appropriate.

The second portion should have the following changes made:


[Updated: Sunday, November 18, 2007]