显示加载图像，而$ .ajax执行
我只是想知道如何显示一个表示asynchronous请求正在运行的图像。 我使用下面的代码来执行asynchronous请求：
$.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事件的更一般的解决scheme，这样它显示所有的ajax事件：
$('#loading-image').bind('ajaxStart', function(){ $(this).show(); }).bind('ajaxStop', function(){ $(this).hide(); });
使用ajax对象的beforeSend并完成函数。 最好在发送前从内部显示gif，这样所有的行为都被封装在一个对象中。 使用成功函数小心隐藏gif。 如果请求失败，您可能仍然希望隐藏gif。 要做到这一点使用完整的function。 它看起来像这样：
$.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('guesthttp://img.dovov.comajax-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调用中显示的“图像”是一个animationgif。 由于无法确定ajax请求的完成百分比，所使用的animationgif是不确定的spinners。 这只是一个像一个不同大小的圆球一遍又一遍重复的图像。 一个很好的网站来创build你自己的不确定的微调是http://ajaxload.info/
我一直喜欢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(); } });
