如何在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; 
    }); 
});