ajax 호출 중에 JavaScript 로딩 이미지가 정지합니다.

Question

비동기 Ajax 호출을 사용하는 jQuery를 사용하여 페이지를 만들었습니다. 나는 로딩 gif를 표시하려고 노력하고 있지만, 내 인생에서 나는 그것을 작동시킬 수 없다. GIF는 절대로 표시되지 않습니다. 어떤 아이디어? 첫째

function updateCityList(state) { 
     $("#city-loading").empty().html('<img src="/Images/loading.gif" />'); 
     $.ajax(
      { 
       type: "GET", 
       async: true, 
       url: "/NPA/GetCities/" + state, 
       dataType: "json", 
       success: function(optionData) { 
        var options = []; 
        $(optionData).each(function(index, optionData) { 
         if ($('#cities option[value=' + optionData.Value + ']').length == 0) 
          options.push(optionData); 
        }); 
        $("#cityList").fillSelect(options); 
       } 
      }); 
     $("#city-loading").empty(); 
    }; 

Answer 1

$.ajax()에 대한 호출은 요청을 비동기 적으로 수행하기 때문에 요청을 설정하고 즉시 계속됩니다. 따라서 $("#city-loading").empty();에 대한 호출이 즉시 발생합니다.

$("#city-loading").empty();을 success: 함수의 끝으로 이동해야하므로 AJAX 요청이 완료 될 때까지 호출되지 않습니다.

Answer 2

당신은 전화 :

$("#city-loading").empty(); 

당신은 아약스에서 이미지를 숨겨야합니다 : 그것은 비동기 코드 실행이 계속 실행 것 때문에

$("#city-loading").empty().html('<img src="/Images/loading.gif" />'); 

다음, 아약스 호출입니다 콜백 :

function updateCityList(state) { 
    $("#city-loading").empty().html('<img src="/Images/loading.gif" />'); 
    $.ajax(
     { 
      type: "GET", 
      async: true, 
      url: "/NPA/GetCities/" + state, 
      dataType: "json", 
      success: function(optionData) { 
       $("#city-loading").empty(); 
       var options = []; 
       $(optionData).each(function(index, optionData) { 
        if ($('#cities option[value=' + optionData.Value + ']').length == 0) 
         options.push(optionData); 
       }); 
       $("#cityList").fillSelect(options); 
      } 
     }); 
}; 

Answer 3

나는 코드가없는 설명을 제공 할 것이다. DOM에 HTML을 동적으로 추가하고 있습니다 (img src). DOM은 Javascript 실행과 독립적 인 자연스러운 대기 시간을가집니다. 이것이 의미하는 바는 아약스 호출이 먼저 수행 된 다음 애플리케이션이 서버에서 이미지를 다운로드한다는 것입니다.

가장 좋은 해결책은 이미지를 페이지에 추가하는 것입니다. 이미지가 DOM에로드되었는지 확인합니다. (이미지 객체에 id를 추가 한 다음 쿼리를 사용하여 액세스 할 수 있음을 확인하십시오). 그럼 아약스 전화 해.

다른 옵션은 서버 다운로드가 필요 없도록 이미지를 미리로드하는 것일 수 있습니다.