Php 向ajax代码添加加载程序

我有打印评论的ajax脚本 我想在服务器查询工作时添加加载器

 $.ajax({
    type: "POST",
    url: "ajax/followPrint.php",
    data: info,
    success: function(msg){


        if (type == "followsTab")
            $("#follows").html(msg);
        if (type == "commentsTab")
            $("#commentsContent").html(msg);    
   }
 });

return false;

为了在我的html页面中看到加载器，我需要为成功添加什么

function printComments (obj) {

    var element = $(obj);
    var contactID = element.attr("contactID");
    var type = element.attr("id");
    var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
    $("#loader").html('<img src="images/loading.gif" align="absmiddle">');
//  alert(info);


     $.ajax({
        type: "POST",
        url: "ajax/followPrint.php",
        data: info,
        success: function(msg){


            if (type == "followsTab")
                $("#follows").html(msg);
            if (type == "commentsTab")
                $("#commentsContent").html(msg);    
       }
     });

    return false;

}

范例

HTML

<a href="#" id="verification" >test</a>
<img src="example_preloader.gif" id="ajaxPreloader" style="display:none" />

---

你可以玩捉迷藏

function printComments (obj) {

    var element = $(obj);
    var contactID = element.attr("contactID");
    var type = element.attr("id");
    var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
    $("#loader").show(); // displaying loader here


     $.ajax({
        type: "POST",
        url: "ajax/followPrint.php",
        data: info,
        success: function(msg){
            if (type == "followsTab")
                $("#follows").html(msg);
            if (type == "commentsTab")
                $("#commentsContent").html(msg);    

             $("#loader").hide(); // hiding loader here

           }
     });

    //return false; 

}

---

使用beforeSend显示加载程序，然后在success函数中隐藏该加载程序

   $.ajax({
    type: "POST",
    url: "ajax/followPrint.php",
    data: info,
    beforeSend:function(){
      $("#loader").show();
     },
    success: function(msg){

        $("#loader").hide();
        if (type == "followsTab")
            $("#follows").html(msg);
        if (type == "commentsTab")
            $("#commentsContent").html(msg);    
   }
 });  

请尝试以下代码：

    $.ajax({
        type: "POST",
        url: "ajax/followPrint.php",
        data: info,
        **beforeSend: function() {
            $("#loader").html("<img src="images/loading.gif" align="absmiddle">");
            },**
        success: function(msg){    
             $('#loader').hide();
            if (type == "followsTab")
                $("#follows").html(msg);
            if (type == "commentsTab")
                $("#commentsContent").html(msg);    
       }
     });

额外添加了这行代码：

---

函数printComments obj{

var element = $(obj);
var contactID = element.attr("contactID");
var type = element.attr("id");
var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
$("#follows").html('<img src="images/loading.gif" align="absmiddle">');
$("#commentsContent").html('<img src="images/loading.gif" align="absmiddle">');

}

var element = $(obj);
var contactID = element.attr("contactID");
var type = element.attr("id");
var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
$("#follows").html('<img src="images/loading.gif" align="absmiddle">');
$("#commentsContent").html('<img src="images/loading.gif" align="absmiddle">');

 $.ajax({
    type: "POST",
    url: "ajax/followPrint.php",
    data: info,
    success: function(msg){


        if (type == "followsTab")
            $("#follows").html(msg);
        if (type == "commentsTab")
            $("#commentsContent").html(msg);    
   }
 });

return false;