jQuery .load完成淡入并删除加载微调器

Question

我正在使用jQuery .load函数从其他页面获取3个列表项。它工作得很好，但我想知道如何在内容加载时添加“加载微调器”以及如何在加载内容时淡入我的内容。

我的代码：

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

P.S我不知道这是获得这些产品的正确方法，但它对我有用。

Answer 1

最好的是使用全球ajaxStart和ajaxStop事件：

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

当待处理的ajax请求数从0增加到1时，ajaxStart事件将触发，并且当所有ajax请求都已完成时，ajaxStop事件将触发。

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 毫秒。