如何给用户一个进度条

Question

我有这个site这里

我有一个通过此命令

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调用PHP页面Ajax请求页面，它执行数据库查询，所以有时候这可能会很慢，并且有时会滞后一些。我想知道是否有一个干净的方式来做进度条，所以当用户点击顶部下拉菜单时，进度条出现，所以用户不会得到滞后或更糟糕的等待时间为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事件处理程序。