ダブル画像の読み込みをエスケープする方法は？

Question

私のWebプロジェクトでは、別のhtmlページと_Layoutページがあります。 このレイアウトページには、このようなユーザのプロフィールの写真が表示さ：

<img src="~/Path/avatar.png" id="avatar"> 

をそして私は一つのことを実現します。ユーザーがこれまでにプロフィールの写真をアップロードしていない場合は、_layoutページは常に標準avatar.pngが表示されます。現在のユーザーが既にプロフィールの写真は、その名前を返し、その後、jqueryのは、すでに存在していた画像に標準<img src="">を変更HasAvatar()コントローラメソッドをアップロードした場合

$.ajax({ 
     type: 'POST', 
     url: '/Account/HasAvatar/', 
     success: 
      function (data) { //data - it's the name of the image file 
       console.log(data); 
       if (data == null) 
        return; 
      $("#avatar").attr("src", window.location.protocol+"//"+window.location.host+"/Path/" + data); 
     } 
    }) 

：彼は自分のアバターをアップロードする場合はそうでなければ、私は次の操作を行います。しかし、ここに私は問題があります。ユーザーがページを読み込むと、最初に標準のアバターが表示され、現在のユーザーのイメージが読み込まれます（0.2秒）。この二重イメージの読み込みをエスケープする方法は？何か案は？

Answer 1

最初にimgを非表示にするには、cssを使用します。 style="display:none;"を使用して、イメージのロードが、このように再度表示する場合：

$.ajax({ 
    type: 'POST', 
    url: '/Account/HasAvatar/', 
    success: 
     function (data) { //data - it's the name of the image file 
      console.log(data); 
      if (data == null){ 
       $("#avatar").css('display', 'initial'); 
       return; 
      } 
      $("#avatar").one('load', function(){ 
       $("#avatar").css('display', 'initial'); 
      }); 
      $("#avatar").attr("src", window.location.protocol+"//"+window.location.host+"/Path/" + data); 
     } 
}) 

Answer 2

イメージがサーバー側に存在するかどうかを確認し、クライアントに送信する前にsrcを置き換えます。