Javascript显示动态变化的图像

Question

我想每 1 秒刷新一张图像。该图片是由我的网络摄像头动态生成的，但是当浏览器在显示之前尚未加载图片时，该脚本有时会显示损坏的图像。如何检测图片何时加载并更改显示图片？我有这样的代码:

    <img id="image" src="webcam.jpg">


<script>
setInterval(function() {
    var myImageElement = document.getElementById('image');
    myImageElement.src = 'webcam.jpg?rand=' + Math.random();
}, 1000);
</script>

Answer 1

您应该先等待图像加载，然后再替换它。

为此，您可以使用不同的方法。我通常做的是创建另一个不可见的图像，并在加载前一个图像后替换可见的图像。

如果您想遵循此方法，您的代码应如下所示:

<img id="image" src="webcam.jpg">


<script>
setInterval(function() {
    var url = 'webcam.jpg?rand=' + Math.random();
    var img = new Image();
    img.src = url;
    img.addEventListener('load', function() {
        var myImageElement = document.getElementById('image');
        myImageElement.src = url;
    });
}, 1000);
</script>

您还可以使用 css 样式来根据状态使图像隐藏或可见，但这会使您的图像出现和消失，这有点难看......

希望对你有帮助:)