주문

Question

가 나는 동적 콘텐츠가 비동기 (HAML 여기)로드하는 동안 스피너 애니메이션을 표시하는 페이지가 있습니다

#loading_spinner 

#async_vote 

:javascript  
    $(document).ready(function() { 
    $.ajax({ 
     url: "/votes/voteables", 
     cache: false, 
     beforeSend: function(xhr){ 
     $("#loading_spinner").show(); 
     }, 
     success: function(html){ 
     $("#loading_spinner").hide(); 
     $("#async_vote").html(html); 
     } 
    }); 
    }); 

속도가 느린 요청을 시뮬레이션하기를, 내가 넣어 가지고 :voteables -method에 몇 초 동안 잠자기.

이제 브라우저에 (#loading_spinner) 요소가 표시되지 않는 문제가 있습니다.

페이지가로드 될 때 JavaScript 코드가 실행 되더라도 AJAX 호출이 실제로 회 전자의 배경 이미지를 가져 오기 전에 실행됩니다. 따라서 컨트롤러의 지연이 3 초인 경우 이미지가 즉시로드되고 (요청이 병렬로 제공되지 않기 때문에) success 콜백이 실행되고 이미지가 즉시 숨겨집니다.

레일 3.2를 사용하고 rails server으로 앱을 실행 중입니다.

개발시이 문제를 해결하는 방법에 대한 권장 사항이 있습니까? 그리고 그것은 생산에서 문제가 될 것인가?

Answer 1

당신이 부하의 아약스 요청을 포장하면 내가 대신 준비의 생각, 그것은 실행되지 않습니다 이미지가 다음과 같이 다운로드 한 때까지

$(window).load(function(){ 
    // ajax functionality goes here 
});