javascript - 当可折叠 block 打开 Jquery Mobile 时显示加载动画

Question

我在打开可折叠 block 时尝试显示加载图标时遇到问题。我有一个带有 ListView 的可折叠 block ，其中通过 ajax/php 动态填充。他们的列表可能有多达 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

您想在 ajax 调用的回调函数中调用 $.mobile.hidePageLoadingMsg():

$('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) == '函数') {
console.log('扩展'+idval);
}