제출 양식을 실행하는 동안 로딩 gif를 표시하는 방법 JQuery

Question

간단한 회 전자 gif를 표시하는 중 제출이 실행 중입니다. (웹을 통해 제공 업체와 일부 통신을 설정해야하기 때문에 제출이 실행되고 있습니다. 서비스). 이 동결

$('#gds_form').submit(function() { 
     var pass = true; 
     //some validations 

     if(pass == false){ 
      return false; 
     } 

     $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>'); 
     $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>"); 
     return true; 
    }); 

것은이되면, .gif 참고 : 어떤 애니메이션이 표시되지 않습니다, 그것은처럼 :

그래서, 나는이 있습니다.

왜?

또 다른 방법으로 이것을 구현할 수 있습니다 (AJAX를 사용하지 않고 있고 싶지 않습니다.).

감사합니다.

Answer 1

이미지를 문서에로드 할 준비가 되었습니까? 그런 다음 함수에 표시 하시겠습니까? 이렇게하면 이미지가 이미로드되고 회전합니다.

$(document).ready(function() { 
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>'); 
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>"); 
}); 

$('#gds_form').submit(function() { 
    var pass = true; 
    //some validations 

    if(pass == false){ 
     return false; 
    } 
    $("#overlay, #PleaseWait").show(); 

    return true; 
}); 

Answer 2

.show() 및 .hide()를 사용하여로드하는 동안 애니메이션을 전환 할 수 있습니까?

Answer 3

실제 문제는 요청이 완료되었을 때 클라이언트 측에서 어떻게 알 수 있는지입니다. Ajax가 도움이되는 이유 중 하나는 상태에 대한 개념이 있기 때문에 클라이언트가 응답을 기다리는 동안 로더를 표시하고 클라이언트가 응답을 받으면 로더를 제거 할 수 있기 때문입니다.

웹 서비스와의 통신이 완료 될 때를 어떻게 결정할 예정입니까? Ajax를 사용하고 싶지는 않지만 서비스를 쿼리하여 통신이 완료되었는지 여부를 확인하려는 경우 Ajax가 필요한 항목이있을 수 있습니다.

Answer 4

페이지의 div는 style='display:none'으로 시작하고 표시하려면 코드에 $('#PleaseWait').show()을 붙이십시오.

display:none을 끄는 경우 양식을 반복해서 제출할 필요없이 어떻게 보이는지 편집 할 수 있습니다.

NB : 편의상 오버레이와 gif을 부모 div에 넣을 수 있습니다. JQuery와 submit 기능을 사용

는

Answer 5

,이 같은 로딩 이미지를 지정할 수 있습니다 : 난 당신이 애니메이션 GIF를 사용하고 당신이 그것을 보여 주면 애니메이트한다고 가정

$('#form').submit(function() { 
    $('#wait').show(); 
    $.post('/somepage.htm', function() { 
     $('#wait').hide(); 
    }); 
    return false; 
});