当然，您可以在发出请求之前显示它，并在它完成后隐藏它：

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

我通常更喜欢将它绑定到全局 ajaxStart 和 ajaxStop 事件的更通用的解决方案，这样它就会显示所有 ajax 事件：

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

使用ajax对象的beforeSend和complete函数。最好在发送之前从内部显示 gif，以便所有行为都封装在单个对象中。使用成功函数隐藏 gif 时要小心。如果请求失败，您可能仍想隐藏 gif。为此，请使用 Complete 函数。它看起来像这样：

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

HTML代码：

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

CSS 代码：

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

查询代码：

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

我认为如果你有大量的 $.ajax 调用，这可能会更好

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

笔记：

如果你使用 CSS。当 ajax 从后端代码中获取数据时，您想要显示的元素必须是这样的。

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

人们通常在 ajax 调用期间显示的“图像”是 gif 动画。由于无法确定 ajax 请求的完成百分比，因此使用的动画 gif 是不确定的微调器。这只是一个图像，像一个大小不一的圆球一样一遍又一遍地重复。创建自己的自定义不确定微调器的好网站是http://ajaxload.info/