顯示正在執行的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>