如何为用户提供进度条

Question

我这里有site

我有一个通过此命令调用php页面的ajax请求

var successCallback = function(responseText, textStatus, XMLHttpRequest) {
 // rebind your event handlers here
   // blue item expand
   $('.item-blue .btn-expand').click(function () {

       var btn = $(this);
       $(this).parent().prev().slideToggle(function () {
           btn.toggleClass('btn-expand-h');
       });
       return false;
   });
};

$("#main_content").load("/pre_config/function.php?type="+type+"piz&count=1", successCallback );

它运行良好但这是调用一个执行数据库查询的php页面，所以有时这可能会很慢并且有时会滞后一点。我想知道是否有一个干净的方法来进行进度条，所以当使用点击顶部下拉列表时，进度条出现，这样用户就不会得到滞后或更糟糕的等待db瓶颈

Answer 1

如果页面上没有任何其他ajax请求，则可以使用ajaxStart()函数为所有ajax事件定义全局事件处理程序。您可以像这样使用它：

var main = $('#main_content');

main.ajaxStart(function(){
  main.empty().append("<img id="throbber" src='throbber.gif' alt='Loading. Please wait.' />");
});

throbber.gif之类的内容来自此网站：http://www.ajaxload.info/

否则您也可以将此行附加到click事件处理程序。