在执行$ .ajax时显示加载图像

我只是想知道如何显示指示异步请求正在运行的图像。我使用以下代码执行异步请求：

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

有任何想法吗？

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

$('#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函数。最好从beforeSend内部显示gif，以便将所有行为封装在一个对象中。使用成功函数隐藏gif时要小心。如果请求失败，您可能仍要隐藏gif。为此，请使用完成功能。它看起来像这样：

$.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%;
}

JQUERY代码：

$.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调用时通常显示的“图像”是动画gif。由于无法确定ajax请求的完成百分比，因此使用的gif动画是不确定的微调器。这只是一幅不断重复的图像，就像一团大小不一的圆圈。创建自己的自定义不确定微调器的好网站是http://ajaxload.info/

我认为如果您有大量的$ .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 */
}

我一直很喜欢这个BlockUI插件： http //jquery.malsup.com/block/

它允许您在运行ajax请求时阻止页面的某些元素或整个页面。

在调用之前，可以将加载图像插入div / span中的某个位置，然后在成功函数上删除该图像。另外，您可以设置一个CSS类，例如加载，看起来像这样

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

然后将该类分配给span / div并在成功函数中将其清除

像这样的东西：

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

您可以添加一个ajax开始和完成事件，这是当您单击按钮事件时的工作

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

1. 创建一个加载元素，例如ID = example_load的元素。
2. 默认情况下，通过添加style =“ display：none;”将其隐藏。

3. 现在使用ajax上方的jquery show element函数显示它。

   $('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });