javascript - 如何防止 img src 无效，如果无效则保留以前的图像

Question

我正在尝试将实时图像流式传输到我的网页。在后台更新图片内容时，有时路径可能会返回无效内容。如何检测 URL 包含无效内容，从而不刷新我的图像？

我目前的图像更新实现:

function update(){

 $("#live").prop("src", "/HTTPGetImage?ImageIndex=0?"+ +new Date());

 setTimeout(update, 3000);

}

我尝试使用 .get() 来检查返回数据是否有效。

$.get('/HTTPGetImage?ImageIndex=0?').done(function(data)
{
  if(data!="")
   $("#live").prop("src", "/HTTPGetImage?ImageIndex=0?"+ +new Date());
})

但是这种方法行不通。我认为后端的更新非常频繁，所以在我对服务器的第一次和第二次请求之间，后端的图像可能已经更新了。我应该怎么做才能避免获得无效内容，如果我获得无效内容，我该如何保留当前的 ​​img src ？

Answer 1

您可以使用 jquery 创建一个您不会附加到 DOM 的伪图像，并挂接到它的 load 和 error 事件。我的示例展示了如何实现这一点 - 只需将您的逻辑实现到 onerror 和 onload 处理程序中 - 如果加载，您可以设置图像，如果触发错误，则显示上一个。

$(document).ready(function(){
  var last_image = 0
  var sample_images = ["https://via.placeholder.com/100",
                       "https://via.placeholder.com/101/000/fff",
                       "https://via.placeholder.com/error",
                       "https://via.placeholder.com/103/880000/fff"]
   
  function loadImage(){
      
     var next_image = (last_image == sample_images.length-1)?0:last_image+1
     setTimeout(function(){
         
        var pseudoImg = $("<img>");
        pseudoImg.attr("src",sample_images[next_image])
        pseudoImg.on("load",function(){
          $("#img").attr("src",sample_images[next_image])
          $("#url").html(sample_images[next_image])
          last_image=next_image
          loadImage()
        });
        pseudoImg.on("error",function(){
          // not changing previous image
          $("#url").html("ERROR LOADING "+sample_images[next_image]+"<br> displaying previous: "+sample_images[last_image])
          last_image=next_image
          loadImage()
        })
     
        
     },2000)
  }
  
  loadImage()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/100" id="img">
<div id="url">https://via.placeholder.com/100</div>

对于您的示例，代码将如下所示:

function update(){
   setTimeout(function(){
     var timestamp = new Date()
     var url = "/HTTPGetImage?ImageIndex=0?"+timestamp
     var pseudoImg = $("<img>");
     pseudoImg.attr("src",url)
     pseudoImg.on("load",function(){
       $("#live").attr("src",url)
       update()
     });
     pseudoImg.on("error",function(){
       // don't do nothing, just call next update 
       update()
     }) 
  },3000);
}