이중 이미지 로딩을 어떻게 피할 수 있습니까?

Question

내 웹 프로젝트에서 다른 HTML 페이지와 _Layout 페이지가 있습니다. 이 레이아웃 페이지는 다음과 같이 사용자의 프로필 사진이 표시

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

을 그리고 나는 한 가지를 구현 : 사용자가 지금까지 프로필 사진을 업로드하지 않은 경우, _Layout 페이지는 항상 표준 avatar.png를 표시합니다. 현재 사용자가 이미 이름을 반환 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); 
     } 
    }) 

다음 JQuery와는 이미에 표준 <img src=""> 이미지를 존재 변경 : 그는 자신의 아바타를 업로드 한 경우 그렇지, 내가 다음에 수행. 하지만 여기에는 문제가 있습니다. 사용자가 페이지를로드하면 먼저 표준 아바타를 볼 수 있으며 현재 사용자의 이미지가로드 될 때만 (0.2 초 안에) 표준 아바타를 볼 수 있습니다. 이 이중 이미지 로딩을 어떻게 피할 수 있습니까? 어떤 아이디어?

Answer 1

처음에는 예를 들어 css를 사용하여 img를 숨길 수 있습니다. 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를 교체하십시오.