我想每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样式玩游戏,以根据状态隐藏或显示图像,但这会使图像显示和消失,这有点丑陋...
希望对您有所帮助:)