javascript - jQuery Mobile showPageLoadingMsg()/hidePageLoadingMsg() 方法在初始页面加载时不起作用

Question

我正在使用 jQuery Mobile 编写一个 webapp，它调用一个函数将记录加载到 localStorage 并在最初创建页面时从远程 JSON 文件创建一个 ListView (使用 live.pagecreate()页面事件)。此函数的开头是 jQuery Mobile 方法 $.mobile.showPageLoadingMsg()，$.mobile.hidePageLoadingMsg() 位于函数的末尾。

在初始页面创建时，加载消息不会出现(在装有 iOS 4.3 Safari、Chrome 13 和 Firefox 5 的 iPhone 4 上)。但是，我在页面上也有一个刷新按钮；此按钮清除 localStorage 中的关联记录，然后调用用于最初填充 ListView 的相同函数。但是，当从刷新按钮调用相同的函数时，showPageLoadingMsg() 和 hidePageLoadingMsg() 都可以正常工作并且加载屏幕会出现和消失。我在这里遗漏了什么吗？

ETA 这是代码的要点(现在不在实际代码前面，如果您需要更多，我会在今晚放入)。我还应该提到，我已经尝试将 showPageLoadingMsg 放入 (document).ready 并尝试将其绑定(bind)到 mobileinit，但都没有成功:

function loadListView(){
   $.mobile.showPageLoadingMsg();
   //ajax call to pull JSON
   //$.each loop to load localStorage and listview
   $.listview.refresh('list');
   $.mobile.hidePageLoadingMsg();
}

$(#listpage).live('pagecreate', function(event){
   loadListView(); // showPageLoadingMsg() and hidePageLoadingMsg do not work when the function is called here
});

function clearList(){
   //for loop that clears each item in localStorage that matches the key prefix set in loadListView
}

//runs when refresh button is clicked
$('listrefresh').live('click',function(){
   clearList();
   loadListView(); //showPageLoadingMsg() and hidePageLoadingMsg() work when the function is called here
});

Answer 1

For these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the mobileinit handler, as described on the global config page.

文档:

• http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

例子:

• http://jsfiddle.net/phillpafford/mKn8Y/8/

在示例中，没有任何实时事件在初始页面加载时触发，您必须在 mobileinit 中配置此类操作:

• http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html