ajaxの実行中にイメージを表示する

Question

ajaxリクエストが実行されている間に、divコンテナにajax読み込みイメージを追加しようとしています。

私の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>