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.
Document Header Code
This portion goes in the HEAD of the page, without changes:
|
<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> |
Document Body Code
This portion goes in the BODY of the page, changes defined below:
|
<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:
- ImageSource = the URL where webcam image is available.
- UniqueName = a unique name for this HTML object.
- ImageWidth = width of the webcam image.
- ImageHeight = height of the webcam image.
- RefreshTime = a number representing the seconds between image reloads, 60 = one minute.
