加载页面时显示加载动画微调器页面

Question

我想在加载w/ajax的JQueryMobile页面中显示加载动画微调器。

页面加载data-ajax="false"或rel="external"

我试着pagebeforecreate和pageshow事件，但它不工作如我所料：

$('#page').live('pagebeforecreate',function(event){ 
    $.mobile.loading('show'); 
}); 

$('#page').live('pageshow',function(event){ 
    $.mobile.loading('hide'); 
}); 

Answer 1

有你的要求一个小问题。

首先，您将无法显示/隐藏ajax加载程序而没有设置间隔。只有一种情况，这种情况在页面展示活动期间可能没有。在任何其他情况下，需要setinterval来启动加载器。

这里有一个工作示例：http://jsfiddle.net/Gajotres/Zr7Gf/

$(document).on('pagebeforecreate', '#index', function(){  
    var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  
}); 

$(document).on('pageshow', '#index', function(){ 
    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  
}); 

但在这里，我们有一个不同的问题，除非你的网页是足够复杂的新页面将很快加载。 jQuery手机有内部计时器，看起来页面加载到DOM的速度有多快。如果页面非常复杂并且加载时间超过10毫秒，则在任何其他情况下都会显示加载器，无论您尝试多么艰难，加载器都不会显示。

另请注意，只有DOM加载将计入该10毫秒。页面样式不在计算中。因此，无论页面加载看起来是否只有较长的DOM加载次数。

我的例子不会显示加载器，因为它是一个非常简单的例子。但是，如果您评论此行，则可以看到它是工作示例：

$.mobile.loading('hide');