Ajax 기능이 진행되는 동안 이미지로드 중 어떻게 표시하나요?

Question

다음은 단추 click..html에서 html div를 채울 내 아약스 함수입니다.이 함수가 시작될 때 로더 이미지를 어떻게 표시 할 수 있습니까?이 함수가이 함수를 호출하면 로더가 숨길 것입니다. 다음

function campaignList(){ 
     $.ajax({ 
      type:'post', 
      url:'<%=campaignListURL.toString()%>', 
      data:{}, 
      success:function(data){ 
       $(".main_content").html(data);        
      } 
     }); 
    } 

내가 스크립트 다음

<script type="text/javascript"> 
$("#loading_layer").ajaxStart(function(){ 
     $(this).show(); 
    }); 
</script> 

으로 노력했지만 아무 일도 발생하지 않습니다 .. 는 아약스 로더 GIF 이미지가 내가 숨기고 표시하려는이있는 곳에 내 사업부입니다

<div id="loading_layer" style="display: none"> 

/////////////////////////////////////////////////////////////////////////////// /////////////////////// 위의 ajx 방법에 대한 질문이었습니다.하지만 내가 똑같이하고 싶다면. ng 양식을 제출하는 동안 어떻게 내가 이것을 얻을 수 있습니다 ..? 다음

양식을 submitt 한 자바 스크립트의 내 코드 라인

{사실 모든 검증은 다음 플래그가 true 될 경우 양식 유효성 검사에 대한 몇 가지 자바 스크립트 코드 .....

if (flag == true) { 
    div.style.display = ''; 
alert(""); 
    document.editadform.submit(); 
    } 
     div.style.display = 'none'; 
     return flag; 

}

다음은 내가 형태의 submition 및 숨기기를 표시 할 IMG을 haev 내 하나 개의 사업부 자사의 전

"/> 012을 숨기려 할 때

아무도이 문제에 대해 안내 할 수 있습니까?

Answer 1

이 잘 작동합니다 :

function campaignList(){ 
     $(".main_content").html("<img src='loader.png'>"); // show the ajax loader 
     $.ajax({ 
      type:'post', 
      url:'<%=campaignListURL.toString()%>', 
      data:{}, 
      success:function(data){ 
       $(".main_content").html(data); // this will hide the loader and replace it with the data        
      } 
     }); 
    } 

Answer 2

당신은 당신의 AJAX 스크립트에 beforeSend을 추가 할 수

,

가 JQuery와 아약스의 문서를 살펴 보자, http://api.jquery.com/jQuery.ajax/

function campaignList(){ 
     $.ajax({ 
      type:'post', 
      url:'<%=campaignListURL.toString()%>', 
      data:{}, 
      beforeSend: function (xhr) { 
       //Add your image loader here 
      }, 
      success:function(data){ 
       $(".main_content").html(data);        
      } 
     });  

}