Javascript显示动态变化的图像答案

【问题标题】：Javascript display dynamic changing imageJavascript显示动态变化的图像
【发布时间】：2017-11-29 02:10:21
【问题描述】：

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

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


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

【问题讨论】：

500 是半秒，顺便说一句
Detect image load by jQuery的可能重复
@Liam 他没有使用 jquery，为什么可能会重复一个 jquery 问题？
Op 已将其标记为 jQuery。这通常意味着 jQuery 解决方案是可行的
也可能是Browser-independent way to detect when image has been loaded的副本

标签： javascript jquery html

【解决方案1】：

加载文档后尝试使用它

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

希望对你有帮助

【讨论】：

他没有使用jquery，为什么要添加新的依赖？
嗯，其中一个标签是 jquery。如果他不使用它，标签应该被删除。
jQuery 对这个问题很好，这个答案虽然行不通。完全没有。
我用的是 jquery，因为他在 jquery 下标记了这个。
@Prags 我可以使用 jQuery，没问题。

【解决方案2】：

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

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

如果您想遵循这种方法，您的代码应该如下所示：

<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 样式来根据状态使图像隐藏或可见，但这会使您的图像出现和消失，这有点难看...

希望对你有帮助:)

【讨论】：

【解决方案3】：

我认为你可以使用这样的东西：

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

setInterval(function(){


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

},1000);

&lt;img src="" id="pic" alt="LOCAL pic here"/&gt;

我认为查看文件属性中的 lastModified 时间是假设图像已在服务器上完成写入的好方法。

希望这会有所帮助。

【讨论】：