autorefresh of image saves first image taken

i have a camera that saves jpeg pictures which i then upload on my webpage. im using this javsacript code to do autorefresh:

function refreshCam()
{   
    document.getElementById("cameraImg").开发者_高级运维src = "cameraImg.jpeg?a=" + String(new Date().getMilliseconds());
    setTimeout("refreshCam()",500);
}

however, the very first image i took pops up in between successive image displays. whats worse is that even when i turn off the camera so that no more new images are saved, the picture displayed still continues to change. how do i remove this behavior permanently?

To prevent image "flicker", you can use this technique:

function scheduleNextLoad() {
    setTimeout("loadNextImage()", 500);
}

function loadNextImage() {
    var image = new Image;
    image.onload = function() {
        var previousImage = document.getElementById("cameraImg");
        previousImage.parentNode.replaceChild(image, previousImage);
        image.id = previousImage.id;
        scheduleNextLoad();
    }
    image.onabort = scheduleNextLoad;
    image.onerror = scheduleNextLoad;
    image.src = "cameraImg.jpeg?a=" + String(new Date().getMilliseconds());
}

What this does is create a new img element "on the side", let it load the image in the background and after the image has loaded swap it with the img already in the page. The result is that the visual updates happen instantaneously.

Fire off a single loadNextImage() to get the ball rolling.

And by the way, the getMilliseconds() call is not the best way to go. You might want to use getTime() instead.