0

我想在关闭 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');
});
4

1 回答 1

5

您的请求有一点问题。

首先，如果没有设置间隔，您将无法显示/隐藏 ajax 加载器。只有一种情况下这是可能的，那就是在 pageshow 事件期间。在任何其他情况下，都需要 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 mobile 具有内部计时器，用于查看页面加载到 DOM 中的速度。如果页面很复杂并且加载时间超过 10 毫秒，它将显示加载程序，否则无论您如何努力，加载程序都不会显示。

另请注意，只有 DOM 加载会计入 10 毫秒。页面样式无法计算。因此，无论页面加载是否看起来更长，只有 DOM 加载计数。

我的示例不会显示 loader，因为它是一个非常简单的示例。但是，如果您评论此行，您可以看到它是有效的示例：

$.mobile.loading('hide');
于 2013-04-17T12:45:39.683 回答