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

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


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

最佳答案

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

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

如果要遵循这种方法,您的代码应如下所示:

<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样式玩游戏,以根据状态隐藏或显示图像,但这会使图像显示和消失,这有点丑陋...

希望对您有所帮助:)

09-25 15:53
查看更多