Question

我从相机中取出图像并每秒更新一次，具体如下：

<img id="myImage" style="width: 100%" src="<%= EVERCAM_API %>cameras/<%= @camera['id'] %>/snapshot.jpg?api_id=<%= current_user.api_id %>&api_key=<%= current_user.api_key %>" />

<script type="text/javascript">

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);

</script>

问题是如果在一段时间内我无法从相机中获取图像，我会得到一张损坏的图像。我想要发生的是，如果我没有获得更新的图像 - 图像不会尝试刷新。我已按照以下方式进行了尝试，但我无法让它发挥作用：

var jQuery,
url = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%=   current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime();',
refresh = 1000,
priv = <%= params[:private] %>,
iframeStyle = "width: 100%; height:100%;",
imgStyle = "width: 100%;";

function updateImage() {
if (refresh > 0) {
  window.ec_watcher = setTimeout(updateImage, refresh);
}
jQuery("<img style='" + imgStyle + "'/>").attr('src', url + '?' + new Date().getTime())
  .load(function() {
    if (!this.complete || this.naturalWidth === undefined || this.naturalWidth === 0) {
      console.log('broken image!');
    } else {
      container.empty().append(jQuery(this))
      console.log('updated');
    }
  });
}

我实际上在第二个想法上工作时遇到了麻烦！

如果未找到，则更新图像停止更新

0 个答案: