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

发布于 2024-10-21 10:00:52 字数 241 浏览 1 评论 0原文

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

我的代码：

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

PS 我不知道这是获取这些产品的正确方法，但它对我有用。

原文

I am using jQuery .load function to get 3 list items from other page. It is working perfectly, but I was wondering how to add "loading spinner" while content is loading and how to fade in my content, when it is loaded.

My code :

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

P.S I don't know it is the right way to get those products, but it works for me.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉世弥音 2024-10-28 10:00:52

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

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

当挂起的 ajax 请求数量从 0 增加到 1 时，ajaxStart 事件将触发当所有 ajax 请求完成时，ajaxStop 事件将触发。

The best was is using the global ajaxStart and ajaxStop events:

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

The ajaxStart event will fire when the number of pending ajax requests raises from 0 to 1 and the ajaxStop event will fire when all ajax requests have finished.

回复收藏 0 原文

听风念你 2024-10-28 10:00:52

我通常会这样做：

$("#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 毫秒。

I usually do something like this:

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

Where n is the ammount of time after wich the function will be fired. So the spinner is shown for at least n milliseconds.

回复收藏 0 原文

~没有更多了~