jQuery .load在加载完成后淡入并移除加载动画

Question

我正在使用jQuery的.load函数从其他页面获取3个列表项。它工作得非常完美，但我想知道如何在内容加载时添加“加载动画”，以及如何在内容加载完成后淡入我的内容。

我的代码：

$('.homeProducts').load('http://localhost/products #product_list li:lt(3)');

附言：我不知道这是否是获取这些产品的正确方式，但对我有效。

- Kaspars Milbergs

Answer 1

最好的方法是使用全局的ajaxStart和ajaxStop事件：

$('#yourSpinner').ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

"ajaxStart"事件将在挂起的AJAX请求数量从0增加到1时触发，而"ajaxStop"事件将在所有AJAX请求完成后触发。"

- ThiefMaster

Answer 2

我通常会这样做：

$("#content").html('<div align="center"><img style="margin: 10px 0px 10px 0px;"
align="center" src="ajax-loader.gif"></div>');              
setTimeout('do()', n); 

 ...    
function do(){
$("#content").load('http://localhost/products #product_list li:lt(3)',{},function(){
$(this).fadeIn();
});                                                     
}

其中n是函数触发后经过的时间量。因此，旋转器至少显示n毫秒。

- EnricoOrs.