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

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

1 个答案: