아약스가 실행되는 동안 이미지로드하기

Question

아약스 요청이 실행되는 동안 div 컨테이너에 아약스로드 이미지를 추가하려고합니다.

내 jQuery 코드처럼 보이는 다음

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#store, #gender, #username").change(function() { 
      var store = $("#store").val(); 
      var gender = $("#gender").val(); 
      var receiver = $("#username").val(); 

      $.ajax({ 
       type: "POST", 
       data: { 
        "store" : store, 
        "gender" : gender, 
        "receiver" : receiver 
       }, 
       url: "handling/ajax/store_items_ajax.php", 
       success: function(data){ 
        $("#result").html(data); 
       } 
      }); 
     }); 
    }); 
</script> 

어떻게 다음 HTML DIV에 로딩 이미지를 추가 :

는

<div id="result" class="col-md-12"></div> 

사람이를 알고 있나요?

Answer 1

논리

- Create progress div element 
<div id="progress"> 
    <img style="width:100%" src="/images/spinner.gif"/> 
</div> 

- By default hide this progress div 
- Show when passing ajax request 
- Hide when you get ajax response 

스크립트

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#store, #gender, #username").change(function() { 
     var store = $("#store").val(); 
     var gender = $("#gender").val(); 
     var receiver = $("#username").val(); 

     $('#progress').show(); //show progress bar 

     $.ajax({ 
      type: "POST", 
      data: { 
       "store" : store, 
       "gender" : gender, 
       "receiver" : receiver 
      }, 
      url: "handling/ajax/store_items_ajax.php", 
      success: function(data){ 
       $('#progress').hide(); //hide progress bar 
       $("#result").html(data); 
      } 
     }); 
     }); 

    }); 

</script> 

의