加载页面时显示加载动画微调器
加载页面时显示加载动画微调器
提问于 2013-04-17 20:10:02
我想要显示加载动画微调器在一个JQueryMobile页面，这是加载与ajax关闭。
使用data-ajax="false"或rel="external"加载页面
我在pagebeforecreate和pageshow event上尝试过，但它不像我预期的那样工作：
$( '#page' ).live( 'pagebeforecreate',function(event){
$.mobile.loading('show');
});
$( '#page' ).live( 'pageshow',function(event){
$.mobile.loading('hide');
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-17 20:45:40
您的请求有一个小问题。
首先，如果没有设置时间间隔，您将无法显示/隐藏ajax加载器。只有一种情况可以在没有的情况下实现，那就是在页面显示事件期间。在任何其他情况下，需要设置间隔才能启动加载器。
下面是一个有效的示例：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 mobile有内部计时器，可以查看页面加载到DOM中的速度。如果页面很复杂，加载时间超过10ms，它将显示加载器，在任何其他情况下，加载器都不会显示，无论您如何努力。
还要注意，只有DOM加载才会计入这10毫秒。页面样式超出计算范围。因此，无论页面加载是否看起来不再重要，只有DOM加载才是有效的。
我的示例不会显示loader，因为它是一个非常简单的示例。但是如果你注释这一行，你可以看到它是一个工作的例子：
$.mobile.loading('hide');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16059604
复制相关文章
相似问题
腾讯云开发者
