加載頁面時顯示加載動畫微調器頁面

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');