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

しかし、この方法は機能しません。私は更新がバックエンドで非常に頻繁であると思うので、私の最初と2番目のサーバーへのリクエストの間に、バックエンドのイメージがすでに更新されている可能性があります。無効なコンテンツを取得しないようにするにはどうすればよいですか。コンテンツが無効になった場合、現在の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); 
}