我想每 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 样式来根据状态使图像隐藏或可见,但这会使您的图像出现和消失,这有点难看......
希望对你有帮助:)
关于Javascript显示动态变化的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44756277/