Javascript显示动态变化图像

我想每1秒刷新一次图像。这张照片是由我的网络摄像头动态生成的，但是当浏览器在显示之前没有加载图片时，此脚本有时会显示损坏的图像。如何检测图片何时加载，然后更改diplay图片？我有这样的代码：Javascript显示动态变化图像

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


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

来源

2017-06-26 ADIN

'500'是半秒，顺便说一句 –

[检测图像加载jQuery]可能重复（https://stackoverflow.com/questions/5292819/detect-image-load-by-jquery） – Liam

@利亚姆他没有使用jQuery，那么为什么是一个jQuery问题的可能重复？ – ajimix

你应该等待图像首先被加载后，更换前。

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

您的代码应该是这样的，如果你想采用这种做法：

<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样式发挥，使图像隐藏或可见取决于状态，但会让你的形象出现和消失这是一个有点难看......

我希望它能帮助:)

来源

2017-06-26 09:21:12 ajimix

-2

尝试使用此加载文档

$(document).ready(function() { 
    setInterval(function() { 
    var myImageElement = document.getElementById('image'); 
    myImageElement.src = 'webcam.jpg?rand=' + Math.random(); 
}, 500); 
});

希望这有助于

来源

2017-06-26 09:13:03 Prags

他没有使用jQuery，为什么添加一个新的依赖？ – ajimix

那么，其中一个标签说jQuery。如果他不使用它，标签应该被移除。 –

jQuery对这个问题很好，这个答案虽然不起作用。完全一样。 – Liam

我认为你可以使用这样的事情：

var _img = document.getElementById('pic'), 
 
urlToImage = 'pic.jpg', 
 
modified = false, lastModified = 0; 
 

 
setInterval(function(){ 
 

 

 
fetch(urlToImage) 
 
    .then(function(resp){ 
 
    \t var f = new File([resp],"file"); 
 
     
 
    \t switch(true) { 
 
     case modified === false: 
 
      lastModified = f.lastModified; 
 
      modified = true; break; 
 
      
 
      default: 
 
      modified = false; 
 
      if(lastModified < f.lastModified) { 
 
      modified = true; 
 
      } 
 
    
 
     } 
 
     
 
    \t return resp.blob(); 
 
    }) 
 
    .then(function(blobdata){ 
 
     switch(true) { 
 
     case modified === true: 
 
     var obj_url = URL.createObjectURL(blobdata); 
 
    \t _img.src = obj_url; 
 
     break; 
 
     } 
 
    \t 
 
    }); 
 

 
},1000);

<img src="" id="pic" alt="LOCAL pic here"/>

我认为，在文件属性看着上次更改时间是假设图像结束写入服务器上的一个很好的方式。

希望这会有所帮助。

来源

2017-06-26 10:09:46 Nineoclick

Javascript显示动态变化图像

回答

相关问题