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

Question

我想在JQueryMobile页面中显示加载动画微调器,该页面加载了a/ajax off.

页面加载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加载程序.只有一种情况是没有这种情况,这是在pageshow事件期间.在任何其他情况下,需要setinterval来kickstart到loader.

这是一个有效的例子: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 ms.页面样式不计算在内.因此,无论页面加载看起来更长,只有DOM加载计数.

我的例子不会显示加载器,因为它是一个非常简单的例子.但是如果你评论这一行,你可以看到它是有效的:

$.mobile.loading('hide');