如何在jquery中发生进程时显示加载图像

Question

如何将“加载”图像添加到以下代码中。这是我的意思。如果我为此代码添加一个按钮并且用户单击它。从PHP文件中的内容将加载在与“通知”ID的div中，但当php文件正在处理，我想显示一个加载图像。我会从这个网站获得的图像http://www.ajaxload.info/

function onSuccess(data, status) { 
    data = $.trim(data); 
    $("#notification").html(data); 
} 

function onError(data, status) { 
    // handle an error 
}   

$(document).ready(function() { 
    $("#submit").click(function(){ 

     var formData = $("#expander").serialize(); 

     $.ajax({ 
      type: "GET", 
      url: "grab.php", 
      cache: false, 
      data: formData, 
      success: onSuccess, 
      error: onError 
     }); 
     return false; 
    }); 
}); 

Answer 1

事情是这样的：

 
var $loader = $('<div />').attr('id', 'loader'); 
var $spinner = $('<img />').attr('src', 'ajax-loader.gif') 
    .attr('alt', 'Loading'); 
$loader.append($spinner); 
$('body').children().last().after($loader); 
$('body').ajaxStart(function() { 
     $loader.show(); 
    }).ajaxComplete(function() { 
     $loader.hide(); 
    }); 

Answer 2

u能实现这样的：

创建一个ID loadingImg一个div，将您加载GIF有 使用jQuery的.ajaxStart你可以检测ajax请求的开始。 如果函数返回成功，则在您的预加载图像中淡入淡出效果。

您可以将.ajaxStart事件附加到任何元素，我使用预加载图像容器使其更加引人注目。

.ajaxStart() documentation

function onSuccess(data, status) { 
    data = $.trim(data); 
    $('#loadingImg').fadeOut(); 
    $("#notification").html(data); 
} 

function onError(data, status) { 
    // handle an error 
}   

$(document).ready(function() { 
    $("#submit").click(function(){ 

     var formData = $("#expander").serialize(); 

     $('#loadingImg').ajaxStart(function(){ 
      $(this).fadeIn(); 
     }); 

     $.ajax({ 
      type: "GET", 
      url: "grab.php", 
      cache: false, 
      data: formData, 
      success: onSuccess, 
      error: onError 
     }); 
     return false; 
    }); 
});