显示加载动画微调而载入页面(Display Loading Animation Spinner wh

我要显示在其中加载W /阿贾克斯断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:

有你的要求一个小问题。

首先，你将不能够显示没有设置间隔/隐藏阿贾克斯装载机。 有只有一个情况下，这是没有可能，那就是pageshow活动期间。 在任何其他情况下的setInterval需要的kickstart到装载机。

这里有一个工作示例： 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加载计数。

我的例子不会显示加载器，因为它是一个很简单的例子。 但是你可以看到，它正在例如，如果你对此有何评论这一行：

$.mobile.loading('hide');

文章来源: Display Loading Animation Spinner while Loading Page