I have a webcam that overwrites "pic.jpg" every few second. The problem I'm having is sometimes my code below executes in the exact time that the webcam is overwriting the old image, resulting in a broken image. Then when the function runs again (after the webcam has finished uploading the image) everything works fine and the image shows up. So I'm trying to stop the broken image from ever showing. I'm new to javascript/jquery, so this may be wrong on many levels:
<style type="text/css">
#pictest {display:none}
</style>
function updateCams(){
var camurl = "/pic.jpg?"+new Date().getTime();
$("#pictest").attr("src", camurl);
$("#pictest").error(function(){
/* image was being written. Restart the function and try again */
updateCams;
})
/* I want a success/valid type function to go here and update the visible image only on success*/
$("#pictest").valid(function(){
$("#pic").attr("src", camurl);
})
};
setInterval( "updateCams()", 2000 );
<img src="pic.jpg" width="640" height="480" id="pic" alt="Loading..." />
<img src="pic.jpg" id="pictest" />
Anyway, the "valid" function doesn't work. I've tried valid/validate/success and even an if/else, but only .error works right.