在javascript中选择下拉列表时如何显示正在加载的图像

我使用三个下拉列表，并在单击函数ajax调用时使用每个下拉列表。我希望当我从下拉列表中选择时，加载数据需要时间。所以我想在处理来自ajax调用的数据时加载图像。 我试过这个：

      <form id="my_form" name="my_form">
 <div class="row">
                <div class="col-md-6"><h5 class="text-primary">City</h5></div>
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">#</span>
                        <!--<input type="text" class="form-control" id="city" placeholder="City" aria-describedby="basic-addon1" name="city"  >-->
                        <select class="form-control" id="tps_city" name="tps_city" placeholder="Please Select City" aria-describedby="basic-addon1" required onChange="fun_city(this.value);">
                            <option>Select City </option>
                            <option>Pune</option>
                            <option>Satara</option>
                            <option>Sangli</option>
                            <option>Kolhapur</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row" >
                <div class="col-sm-6"><h5 class="text-primary">Tehshil</h5></div>
                <div class="col-sm-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">#</span>
                        <select class="form-control" id="tehsil_name" name="tehsil_name" placeholder="Please Select Tehshil" aria-describedby="basic-addon1"  required onChange="fun(this.value);">
                            <option>Select Authority </option>
                            <?php

                            ?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row" >
                <div class="col-sm-6"><h5 class="text-primary"> Wadi</h5></div>
                <div class="col-sm-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">#</span>
                        <select class="form-control" id="wadi" name="wadi" placeholder="Village/Wadi/Wasti" aria-describedby="basic-addon1"  required onchange="drawChart(this.value);">
                            <option value="">Please Select Wadi</option>
                        </select>
                    </div>
                </div>
            </div>
            <br/>
            <div id="result"></div>

            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-3"> <input class="btn btn-primary btn-md" type="submit" value="Save" name="submit" id="submit"></div>
                <div class="col-md-6"> <input class="btn btn-primary btn-md" type="reset" value="Refresh" name="Cancel" id="cancel" onClick="window.location.reload(true)"></div>
            </div>

        </form>
            <div id="loading">
                            <img id="loading-image" src="../data/LoaderIcon.gif" alt="Loading..." />
                        </div>  

我的ajax代码如下

  <script>
  function fun_city(val) {
    // alert(val);
    $.ajax({
      type: "POST",
      data: 'city_name=' + val,
      url: "authority_detail.php",

         beforesend: function() {

          $('#loading').hide();

        },
      success: function(msg) {


        // alert(msg);
        var name1 = JSON.parse(msg);
        var autho_name = new Array();
        var i = 0;
        for (var key in name1) {
          if (name1.hasOwnProperty(key)) {
            autho_name[i] = name1[key]["tps_authority"];
            i++;
          }
        }
        // alert(tehsil_name);
        $('#tehsil_name').append("<option>Please select Authority</option>");
        for (var j in autho_name) {

          $('#tehsil_name').append("<option value=\"" + autho_name[j] + "\">" + autho_name[j] + "</option>");

        }
      }

beforesend嵌套在success中。因此，它不能在ajax调用之前触发，它将被定义，甚至在ajax调用成功后也不会触发

而不是：

$.ajax({
      success: function(msg) {
        beforesend: function() {...}
      }
})

这样做：

  $.ajax({
          beforesend: function() {...},
          success: function(msg) {...}

    })

在complete中隐藏加载图像，而不是beforesend，因为complete是一个回调函数，在成功和错误时都会被调用

在进行ajax调用之前，将图像显示为函数fun_cityval的第一个语句