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

问题描述：

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

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; 
    }); 
});

答

事情是这样的：

 
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(); 
    });

每次我按下按钮它增加了一个新的装载图像是有办法只能使显示一个图像，即使我按下按钮多次？ – bammab 2011-12-18 09:16:44

答

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; 
    }); 
});

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

相关推荐