jqm + backbone.Js + require.Js顯示加載消息之前加載頁面

我正在使用jquery mobile 1.1，我想在使用骨幹路由器加載頁面之前顯示加載消息。移動啓動代碼是jqm + backbone.Js + require.Js顯示加載消息之前加載頁面

$(document).bind("mobileinit", function() { 
$.mobile.ajaxEnabled = false; 
$.mobile.linkBindingEnabled = false; 
$.mobile.hashListeningEnabled = false; 
$.mobile.pushStateEnabled = false; 

$.mobile.showPageLoadingMsg="loading";}

但是加載消息未顯示。有什麼建議嗎？

來源

2013-05-02 ANonmous Change

通常的方法不會幫助你，因爲如果頁面加載到DOM中的時間超過10ms，jQuery Mobile將只顯示加載器，即使在頁面加載到DOM時它也會隱藏。通常如果頁面非常複雜，那麼在頁面成功顯示之前會很長。

但您可以手動顯示/隱藏它。

這裏有一個工作示例：http://jsfiddle.net/Gajotres/qx7Yn/

$(document).on('pagebeforecreate', '[data-role="page"]', function(){  
    var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  
}); 

$(document).on('pageshow', '[data-role="page"]', function(){ 
    var interval = setInterval(function(){ 
     //$.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  
});

基本上所有你想要做的是顯示程序的時候，頁面即將被創建和pageshow事件中隱藏它。在我的情況下，這行：

//$.mobile.loading('hide');

被註釋，因爲頁面很簡單，它會立即加載。也不要忘了使用這個：

$.mobile.loader.prototype.options.text = "loading"; 
$.mobile.loader.prototype.options.textVisible = true; 
$.mobile.loader.prototype.options.theme = "a";

你需要的一切都在我的jsFiddle的例子。

編輯：

這個例子是使用jQuery移動兼容1.1 .: http://jsfiddle.net/Gajotres/qx7Yn/

來源

2013-05-02 12:01:24 Gajotres

感謝您的code.cool 該代碼適用於簡單頁面罰款，但我使用骨幹網，只適用於單頁但不適用於其他頁面。有什麼建議嗎？ – 2013-05-03 07:04:03

首先，您可以檢查頁面事件是否在其他頁面上觸發，或根本沒有？我們需要找出ajax loader的頁面事件或函數是否存在問題。 – Gajotres 2013-05-03 07:52:32

問題是加載程序在第一頁中關閉而在其他頁面中不顯示。如果我按下下一頁上的刷新按鈕，那麼加載程序會關閉。有什麼建議麼？ – 2013-05-03 08:02:52

感謝您的回答@Gajotres，但因爲我使用的jquery移動-1.1 我使用

$(document).on('pagebeforecreate', '[data-role="page"]', function(){  
var interval = setInterval(function(){ 
    $.mobile.showPageLoadingMsg('show'); 
    clearInterval(interval); 
},1);  }); $(document).on('pageshow', '[data-role="page"]', function(){ 
var interval = setInterval(function(){ 
    $.mobile.showPageLoadingMsg('show'); 
    clearInterval(interval); 
},1);  });

但LOADI ng消息不起作用:(

來源

2013-05-02 12:23:32

如果看一看，在關閉過程中，您正試圖再次顯示它，而不是隱藏它。使用以下行顯示它：$ .mobile.showPageLoadingMsg（true）並用下面的代碼隱藏它：$ .mobile.hidePageLoadingMsg（）; – Gajotres 2013-05-02 13:44:42

我創建了一個與jQM 1.1兼容的示例：http://jsfiddle.net/Gajotres/qx7Yn/ – Gajotres 2013-05-02 13:47:01

jqm + backbone.Js + require.Js顯示加載消息之前加載頁面

回答

相關問題