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

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

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

有什么想法吗？

302950 次浏览
小开

像这样:

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

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

小开
最佳答案

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

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

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

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

小开

使用 ajax 对象的 before send 并完成函数。最好在 before send 中显示 gif，这样所有的行为都被封装在一个对象中。小心使用 Success 函数隐藏 gif。如果请求失败，您可能仍然希望隐藏 gif。为此，请使用 Complete 函数。它看起来像这样:

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

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

小开

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


}
小开

我觉得如果你有一堆美元电话的话，这样会更好

$(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 启动和完成事件，这是工作时，您点击按钮事件

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

**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" >

小开
  1. 为例如 id = example _ load 的元素创建 load 元素。
  2. 默认情况下，通过添加 style = “ display: none;”来隐藏它。

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

    $(’# example _ load’) . show () ; $. ajax ({ 类别: 「 POST 」、「, 资料: {} , 网址: 函数(){ //现在隐藏 load 元素 $(’# example _ load’) . hide () ; } });

小开

你可以用这个也许这个能帮你谢谢

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

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

提交答案