mvc4 with jQuery mobile - 在瀏覽頁面時顯示加載圖片（鏈接或回傳）

Question

jquery mobile在加載頁面時會執行漂亮的頁面加載動畫，但對於數據量大的頁面，用戶仍然可以暫時看到「白色」頁面，直到顯示新加載的頁面。爲了擺脫這一點，我使用以下代碼：

$.mobile.loading('show', { 
text: 'foo', 
textVisible: false, 
theme: 'a', 
html: "" 
}); 

儘管如此，我仍然看到白頁。有沒有一種方法可以在實際頁面加載之前在白頁上顯示動畫？我喜歡http://www.amerimark.com當您點擊左側導航按鈕時，網站顯示加載消息的方式。

Answer 1

這裏有一個工作示例：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加載次數。

我的示例不會顯示加載程序，因爲它是一個非常簡單的示例，並且pageshow事件幾乎可以立即觸發。但是你可以看到，它正在例如，如果你對此有何評論這一行：

$.mobile.loading('hide'); 

你的情況，它應該工作，因爲直到頁面加載pageshow事件將被延長。