当可折叠块打开时显示加载动画Jquery Mobile

Question

我在折叠块打开时尝试显示加载图标时出现问题。我有一个可以通过ajax/php动态填充的listview的可折叠块。它们的列表可能有多达500个元素，所以我想在加载时显示加载动画。

我已经试过

$('div.century').live('expand', function(){ 
var idval = $(this).attr('id'); 
console.log('expanded'+idval); 

$.mobile.showPageLoadingMsg(); 
$.get("helpers/getByCentury.php", { id: idval}, 
function(data){ 
$("#"+idval+" ul.ulist").html(data); 
$("#"+idval+" ul.ulist").listview('refresh'); 
}); 
$.mobile.hidePageLoadingMsg(); 
}); 

我也曾尝试

$('div.century').live('expand', function(){ 
var idval = $(this).attr('id'); 
console.log('expanded'+idval); 

$.mobile.pageLoading(); 
$.get("helpers/getByCentury.php", { id: idval}, 
function(data){ 
$("#"+idval+" ul.ulist").html(data); 
$("#"+idval+" ul.ulist").listview('refresh'); 
}); 
$.mobile.pageLoading(true); 
}); 

没有任何的运气。

谁能告诉我如何解决这个问题？

在此先感谢。

Answer 1

你想调用回调函数$.mobile.hidePageLoadingMsg()您的Ajax调用：

$('div.century').live('expand', function(){ 
var idval = $(this).attr('id'); 
console.log('expanded'+idval); 

$.mobile.showPageLoadingMsg(); 
$.get("helpers/getByCentury.php", { id: idval}, 
function(data){ 
$("#"+idval+" ul.ulist").html(data); 
$("#"+idval+" ul.ulist").listview('refresh'); 
$.mobile.hidePageLoadingMsg();//NOTICE: this has been moved inside the callback function for your $.get() call 
}); 
}); 

另外一对夫妇的指针。

• 你连续两次使用$("#"+idval+" ul.ulist")选择，你可以通过链接功能更高效的通话在一起，就像这样：

$("#"+idval+" ul.ulist").html(data).listview('refresh');

• 如果其他人查看您的网页在没有console.log函数的浏览器中，它们会得到一个错误，并且您的JS将停止运行，通常将一个console.log函数调用放入一个条件中是个好主意，该条件检查该功能是否存在等：

if (typeof(console.log) == 'function') { console.log('expanded'+idval); }