使用多頁加載圖像

Question

我正在開發一個帶有Phonegap和jQuery Mobile的新應用程序。 我希望當內容仍處於「加載狀態」（並且頁面沒有完整顯示）時，會出現一個加載圖片（jqm的默認gif動畫）。

我的應用程序是一個多頁應用這樣的：

<div data-role="page" id="page1"> 
<p>Some stuff for page 1 here</p> 
</div> 

<div data-role="page" id="page2"> 
<p>Some stuff for page 2 here</p> 
</div> 

<div data-role="page" id="page3"> 
<p>Some stuff for page 3 here</p> 
</div> 

我嘗試：

$(document).on('pageshow','#page3', function(){ 
$.mobile.showPageLoadingMsg(); 

// my code 

$.mobile.hidePageLoadingMsg(); 

}); 

但加載圖像不會出現

我嘗試：

$(document).on('pagebeforeshow','#page2', function(){ 
$.mobile.showPageLoadingMsg();       
}); 

and

$(document).on('pageshow','#page2', function(){ 

//all code 

$.mobile.hidePageLoadingMsg(); 

}); 

但是加載不起作用。

在jQuery Mobile中使用加載圖像的正確方法是什麼？

Answer 1

您的請求存在一個小問題。

首先，您將無法顯示/隱藏Ajax加載程序而沒有設置超時。只有一種情況，這種情況在頁面展示活動期間可能沒有。在任何其他情況下，settimeout需要啓動到加載器（至少對於web工具包瀏覽器來說，在firefox中它是可用的）。

這裏有一個工作示例：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');