如何在jquery ajax的后期数据处理期间设置加载图像？

jquery ajax代码是：

$("#id_btnpolls").click(function(){ var valCheckedRadio = $('input[name=data[distributions]]:checked').val(); //alert(valCheckedRadio); $.ajax({ type: "POST", url: "/pollanswers/checkpollanswers", data: "valCheckedRadio="+valCheckedRadio, success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); } }); }) 

单击按钮时，数据会在5秒左右后显示。 在那个loding期间我想添加一个加载图像。 我怎样才能做到这一点？

Answer 1

这是我用于加载图像的CSS + HTML。 我使用jQuery简单地添加一个类，将不透明度从1更改为0，并结合淡入淡出效果的CSS过渡属性。 #loader的背景图像是220px X 80px，只是一个纯色圆角矩形，右侧有文本“加载”。 实际的“ajax”旋转器img高60px，因此相对定位和负边距是使img垂直居中。

  #loader { width: 220px; height: 80px; position: fixed; top: 50%; left: 50%; z-index: -1; opacity: 0; background: url(assets/images/bg-loader.png) no-repeat center center; transition: all .5s ease-in-out; margin: -40px 0 0 -110px; } #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;} .loading #loader {z-index: 1000; opacity: 1.0} 

和HTML（我从http://www.preloaders.net获得loader.gif）：

然后你的jQuery：

 $("#id_btnpolls").click(function(){ var $body = $('body'), valCheckedRadio = $('input[name=data[distributions]]:checked').val(); $body.addClass('loading'); $.ajax({ type: "POST", url: "/pollanswers/checkpollanswers", data: "valCheckedRadio="+valCheckedRadio, success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); $body.removeClass('loading'); } }); }) 

Answer 2

1）拥有图像的保持div，通常不可见。

您可以通过css添加visibility:hidden; （vs visibility: visible; ），或者display: none;

2）在您的点击处理程序中，使该保持div可见。
3）在done回调中，再次使其不可见。

直接来自文档 ，

 var request = $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); request.done(function(msg) { $("#log").html( msg ); // hide your loading image div here }); 

Answer 3

看看jquery的blockUI插件

 $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); 

Answer 4

j-man86指定的HTML和CSS代码很好。 对于jQuery，您可以在AJAX调用中使用beforeSend函数。 在发送AJAX请求之前调用beforeSend 。 要隐藏加载图像，请使用jQuery AJAX的完整function，该function在AJAX请求完成后调用。 所以代码看起来像：

 $("#id_btnpolls").click(function(){ var $body = $('body'), valCheckedRadio = $('input[name=data[distributions]]:checked').val(); $body.addClass('loading'); $.ajax({ type: "POST", url: "/pollanswers/checkpollanswers", data: "valCheckedRadio="+valCheckedRadio, beforeSend: function(){ $body.addClass('loading'); }, success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); }, complete: function(){ $body.removeClass('loading'); } }); })