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

【问题标题】：Show loading image while $.ajax is performed执行 $.ajax 时显示加载图像
【发布时间】：2011-06-08 18:08:10
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

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

$('#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();
});

【讨论】：

从 jQuery 1.9 开始，AJAX 事件应该只附加到document。见stackoverflow.com/questions/2275342/…

【解决方案2】：

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

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

【讨论】：

感谢简单的 sn-p。节省时间@jEremyB
这是非常有用和通用的然后被批准的解决方案。谢谢。
简单的解决方案，但它就像一个魅力。非常感谢！

【解决方案3】：

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");
  }
});

}

【讨论】：

【解决方案4】：

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

【讨论】：

这应该是公认的答案，因为它是通用的！

【解决方案5】：

人们通常在 ajax 调用期间显示的“图像”是动画 gif。由于无法确定 ajax 请求的完成百分比，因此使用的动画 gif 是不确定的微调器。这只是一个反复重复的图像，就像一个大小不一的圆圈球。 http://ajaxload.info/

是创建您自己的自定义不确定微调器的好网站

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

创建一个负载元素，例如一个 id = example_load 的元素。
默认通过添加 style="display:none;" 隐藏它。
现在使用 ajax 上方的 jquery show element 函数显示它。

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

【讨论】：

【解决方案8】：

**你也可以这样使用，也许这个对你有帮助，谢谢**

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

【讨论】：

【解决方案9】：

在您调用之前，将加载图像插入 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，并在成功函数中清除

【讨论】：

【解决方案10】：

类似这样的：

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

【讨论】：

【解决方案11】：

您可以添加 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');
        });

【讨论】：

【解决方案12】：

Javascript

$.ajax({
    url : "url",
    type : "POST",
    data : {},
    beforeSend: function(){
        $("#loader").show();
    },
    success : function(response){
        ...............
    },
    complete:function(data){
        $("#loader").hide();
    },
});

HTML（内部）

<div id="loading"></div>

CSS

#loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
  background-image: url("https://i.stack.imgur.com/MnyxU.gif");
  background-repeat: no-repeat;
  background-position: center;}

【讨论】：

【解决方案13】：

**strong text**Set the Time out to the ajax calls
function testing(){
    
    $("#load").css("display", "block");
    setTimeout(function(){
    $.ajax({
             type: "GET",

          
             url:testing.com,
            
             async: false,
             
             success : function(response){
           
             alert("connection established");

              
            },
            complete: function(){
            alert("sended");
            $("#load").css("display", "none");
         
           },
            error: function(jqXHR, exception) {
                       alert("Write error Message Here");
                  },


       });
     },5000);


  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

<div id="load" style="display: none" class="loader"></div>
<input type="button"  onclick="testing()"  value="SUBMIT" >

【讨论】：