如果发现新图像，请刷新图像

Question

我从应用程序的每秒钟在网络摄像机中刷新图像。我遇到的问题是，如果几秒钟没有从相机中检索到图像（经常发生这种情况），我最终会看到一张破损的图像。我希望拥有它，以便只在发现新图像时刷新。

到目前为止，我有

var int_time = setInterval(function() { 
    var myImageElement = document.getElementById('myImage'); 
    myImageElement.src = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%= current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime(); 
}, 1000); 

是否有可能停止刷新，如果图像检索不到？

Answer 1

以下代码段将有所帮助。

解决方案：

1）创建动态图像对象

2）绑定onload事件

3）动态创建的图像对象的设定的src到所需的新图像链接

4）加载动态图像成功后，替换原始标签或将原始图像标签的src设置为最新图像链接

这将避免破碎的形象的问题

代码：

var int_time; 
(function(){ 
    var el = document.getElementById('myImage'); 
    function loadImage() { 
     var img = new Image() 
      , src = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%= current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime();; 
     img.onload = function() { 
      if (!! el.parent) 
      el.parent.replaceChild(img, el) 
      else 
      el.src = src; 
     } 
     img.src = src; 
    } 
    int_time = setInterval(loadImage, 1000); 
}()); 

Answer 2

将它保存在一个变量，然后检查其内容的变量，但我不能告诉你什么是API返回如果图像无法获取。你需要自己解决这个问题，我假设这里是假的...

var int_time = setInterval(function() { 
    var myImageElement = document.getElementById('myImage'); 
    var newImage = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%= current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime(); 
    if(newImage != false) { //Here you have to build an expression if the image is valid 
     myImageElement.src = newImage; 
    } 
}, 1000);