Question

我有一个相机可以保存jpeg图片，然后我会在我的网页上上传。即时通讯使用此javsacript代码进行autorefresh：

function refreshCam()
{   
    document.getElementById("cameraImg").src = "cameraImg.jpeg?a=" + String(new Date().getMilliseconds());
    setTimeout("refreshCam()",500);
}

然而，我拍摄的第一张图像在连续的图像显示之间弹出。更糟糕的是，即使我关闭相机以便不再保存新图像，显示的图像仍然会继续变化。如何永久删除此行为？

Answer 1

为防止图像“闪烁”，您可以使用此技术：

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());
}

这样做是在侧面创建一个新的img元素“，让它在后台加载图像，并在图像加载后将其与页面中已有的img交换。结果是视觉更新瞬间发生。

点燃一个loadNextImage()以使球滚动。

顺便说一下，getMilliseconds()电话不是最好的方式。您可能希望改为使用getTime()。

自动刷新图像保存第一张图像

1 个答案: