jQuery Mobile - 加載外部HTML

Question

我正在加載一些外部html到一個jQuery的移動應用程序的div。一切正常，但我試圖使它更平滑。

這裏是我的代碼：

$(document).bind('pagebeforecreate', function (event, ui) { 
    if (event.target.id == 'pageViewOrder') { 
     //get the page 
     $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) { 
      $("#viewOrder_content").html(d.html).trigger("create"); 
      $.mobile.loading('hide'); 
     }); 
    } 

發生了什麼事是頁面被Ajax調用結束之前顯示。在這個調用完成之前，有沒有辦法阻止jquery mobile繼續顯示頁面？目前，它顯示的頁面，然後在內容啪啪

編輯：這是加載在單頁

乾杯， 本

Answer 1

暫停顯示過程很簡單，你只需要致電event.preventDefault()。 然後問題在於確保一旦您檢索到您的內容，您就可以使用該流程。我實際上會做的是綁定到pagechange，檢查是否已經檢索到數據，如果沒有，則中斷進程，檢索數據並重新開始。如果是，那麼按計劃進行。

var contentRetrieved = false; //will indicate wether the JSON call has already been executed 
var contentToDisplay; //data from the JSON call 

$(document).live('pagebeforechange', function (event, data) { 
    if ((typeof data.toPage === "string") && ($.mobile.path.parseUrl(data.toPage).hash == '#pageViewOrder')) { 
     if (contentRetrieved) { 
      contentRetrieved = false; //content is already retrieved, we proceed with the pagechange 
     } else { 
      event.preventDefault(); //prevent further page change operations 
      $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) { 
       contentToDisplay = {"html":d.html}; 
       contentRetrieved = true; 
       $.mobile.changePage("#pageViewOrder"); 
      }); 
     } 
    } 
}); 


$(document).bind('pagebeforecreate', function (event, ui) { 
    if (event.target.id == 'pageViewOrder') { 
     $("#viewOrder_content").html(contentToDisplay.html).trigger("create"); 
     $.mobile.loading('hide'); 
    } 
});​