첫 번째 이미지가로드되지 않습니다.

Question

나는 이미지 업로드 절차가 성공적으로 수행되었음을 알리는 다음 코드 스 니펫을 가지고 있습니다.

success(data){ 
     $avatar.attr('src', "/images/common/loading.gif"); 
     $avatar.attr('src', data.url); 
} 

여기 $avatar은 이미지 태그의 컨테이너입니다. 아이디어는 data.url이 성공적으로로드 될 때까지이 이미지를 loading.gif으로로드하는 것입니다. 여기 data.url에는로드하는 데 시간이 오래 걸리는 큰 크기의 이미지가 포함될 수 있습니다.

나뿐만 setTimeOut 사용할 때까지 문제는 이미지 컨테이너에로드되지 않습니다 loading.gif입니다 :

이

success(data){ 
     $avatar.attr('src', "/images/common/loading.gif"); 
     setTimeOut(function(){ 
      $avatar.attr('src', data.url); 
     },100); 
} 

사람이 좀 다른 접근 방식을 제안 할 수보다는 setTimeOut를 사용할 수 있습니까?

Answer 1

업로드 된 이미지 표시가 loader 이미지를 표시하는 것보다 중요합니다.하지만 그 일을하는 경우 onload-event으로 가십시오.

loader 이미지가 실패한 경우 onerror 이벤트를 수신하거나 그렇지 않으면 avatar 이미지가로드되지 않습니다!

Answer 2

success(data) { 
 
    var loader = new Image(); 
 
    var loadMainImage = function() { 
 
    var mainImage = new Image(); 
 
    mainImage.onload = function() { //avatar is loaded! 
 
     $avatar.attr('src', this.src); 
 
    } 
 
    mainImage.src = data.url; 
 
    } 
 
    loader.onload = function() { //loader is loaded! 
 
    $avatar.attr('src', this.src); 
 
    loadMainImage(); 
 
    }; 
 
    loader.onerror = mainImage; //loader is failed! 
 
    loader.src = "/images/common/loading.gif"; 
 
}

난 당신이 비동기 내가 대답으로 게시하고 그 이유는 덜 내 평판이