Feedback on: irt.org FAQ Knowledge Base Q1657
Worth:
Worth reading
Comments:
The idea presented is OK, but suffers from the problem that sooner or later your webcam will be updating the imagefile at the same moment your javascript reads it, resulting in a broken image. (zero byte file or no file)
Question: is there ANY way of verifying if a loaded image is broken or not? (and if broken not display it)
My testing indicates that neither of the methods: document.images, image.onLoad or image.onError will work for this . Nor will image.height or image.width help.
Seems that Javascript is not up to the job.
Any ideas ?
Worth:
Worth reading
Length:
Just right
Technical:
Just right
Comments:
One technical limitation of this script to note: Notice the Math.random() usage at the end of the image. This is used so user's browsers will not used cached versions of images by appending a string of characters to an image's HTTP request. Servers will usually ignore this.
However, this method will probably not work if you are grabbing an image from a program, such as a CGI script, that is dependant on command lines (or 'query strings'). CGI scripts are commonly used to pull random images from a database, as is the case in many webcam directories.
Keep this in mind before intergrating this script. :)
Worth:
Very worth reading
Comments:
took me forever to find a script that really worked, but this one finally hit it... much thanks
Worth:
Very worth reading
Length:
Technical:
Comments:
This script worked perfectly for me. I had a different situation though where i needed two images refreshed. I tried duplicating the code and changing variable names which did not work but in the end i figured out that to add an extra image all you need to do is duplicate this line:
document.images['myCam'].src = 'myCam.gif?' + Math.random();
in the script at the top you just hit enter at the end of that line and hit enter and make another copy of the line. In the script make the document.images['variable'] different for each one and do the same in the <img src="" width="" height="" name="uniique name here"
so in the end to have more than one image add that line for each additional image. Here is an example of the whole page of a two image refresh:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Weather</title>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
document.images['Image1Var'].src = 'Image1.jpg?' + Math.random();
document.images['Image2Var'].src = 'Image2.jpg?' + Math.random();
setTimeout('refreshIt()',5000); // refresh every 5 secs
}
//--></script>
<body onLoad=" setTimeout('refreshIt()',5000)">
<img src="Image1.jpg" width="400" height="300" alt="Image1" name="Image1Var" />
<img src="Image2.jpg" width="400" height="300" alt="Image2" name="Image2Var" />
</body>
</html>
Worth:
Worth reading
Length:
Technical:
Comments:
Thank you, does the job for me.