2013-04-29 80 views
14

我有以下代碼:

HTML:

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/> 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery.mobile-1.3.1.min.js"></script> 

JS:

$(document).on({ 
    ajaxStart: function() { 
    $.mobile.loading('show'); 
    console.log('getJSON starts...'); 
    }, 
    ajaxStop: function() { 
    $.mobile.loading('hide'); 
    console.log('getJSON ends...'); 
    }  
}); 

我使用Jquery Mobile 1.3.1並在Mozilla Firefox和Google Chrome中測試此代碼。我將在稍後使用phonegap應用程序。

我正在加載JSON並在屏幕上以列表視圖顯示它。當它加載時,我希望程序顯示「加載微調器」。控制檯日誌顯示ajaxStart正在觸發,但屏幕上的任何位置都沒有可視旋轉器。

我在做什麼錯?請幫忙!

在此先感謝。

回答

49

jQuery Mobile的文檔所缺乏的關於成功執行的信息:

$.mobile.loading('show'); 

$.mobile.loading('hide'); 

他們將pageshow事件過程中表現出ONLY。在任何其他情況下,你需要將它們包裝到setinterval,像這樣:

如果你不知道pageshow和休息的jQuery Mobile的頁面事件東西看看這個ARTICLE,這是我的個人博客。或找到它HERE

首先,您將無法顯示/隱藏AJAX加載程序沒有設置間隔。只有一種情況,在沒有這種情況的情況下,那是在pageshow事件中。在任何其他情況下setinterval是需要啓動加載程序。

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

var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  

    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  
+0

非常感謝,我無法看到提供的示例工作,但我做了我的你的工作有所幫助! – pguimera 2013-04-30 09:34:43

+2

'pagebeforeshow'事件也是如此。 – styke 2013-05-02 14:50:40

+0

太棒了!謝謝! – 2013-07-13 10:30:44

17

setTimeout作品結束語。我只是有一個簡單的函數來做到這一點:

function loading(showOrHide) { 
    setTimeout(function(){ 
     $.mobile.loading(showOrHide); 
    }, 1); 
} 

然後只是把它當你要顯示或隱藏微調:

loading('show'); 

loading('hide'); 

這是一個愚蠢的jsfiddle :http://jsfiddle.net/7UpW5/

+0

似乎沒有工作,如果async:false ... – 2014-03-25 13:12:36

+0

做。從「beforeSend:func ...」中調用它。另外,添加「async:false」參數。 – MannyC 2015-07-06 15:30:55

0

代碼爲其他答案沒有工作me並且不完整(例如,如果您喜歡最終傳遞參數只需使用布爾true/false進行切換。 下面提供了一個很好的辦法做到這一點:

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */ 
function showLoading(on, params) { // on: true|false 
    setTimeout(function() { 
     if (on) 
     $.mobile.loading("show", params); 
     else { 
     //$.mobile.loading("hide"); // does not seem to work (e.g. using with GWT and jQM 1.4.3) 
     $('.ui-loader').remove(); // removes the loader div from the body 
     }  
    }, 1); 
} 

這樣使用它:

showLoading(true); // show loader 
showLoading(false); // hide loader 
1

裏面AJAX調用? (但會在任何地方工作)

$.ajax({ url: ..., 
    type:'post', dataType:'json', 
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); }, 
    complete: function(){ fSpinner('hide'); }, 
    success: function(res){...}, 
    error: function(e){ alert('Error: ' + e.responseText) } 
}); 

和函數本身:

function fSpinner(strShowOrHide) { 
    setTimeout(function(){ 
     $.mobile.loading(strShowOrHide); 
    }, 1); 
}