Показывать страницу перед запросом данных на jQuery mobile

Question

Когда мое мобильное веб-приложение (которое запускается внутри PhoneGap) запускается, оно выполняет запрос данных с сервера. Проблема в том, что экран остается черным во время выполнения этого запроса. Когда этот запрос выполняется в любое время, кроме как при запуске, приложение показывает диалог загрузки, чтобы дать пользователю некоторую обратную связь о том, что что-то загружается, но при запуске оно не ведет себя таким образом.

Выполняю запрос в обработчике событий pageshow.

Вот код:

$("#home").on("pageshow", onHomeShow); 

... 

function onHomeShow() { 
    syncData(); 
} 

function syncData() { 
    // show loading dialog and get the data here 
} 

Любая и вся помощь будет высоко оценен. Заранее спасибо.

Answer 1

И если вы делаете что-то вроде этого

document.addEventListener('deviceready', this.onDeviceReady, false); 

function onDeviceReady() { 
syncData(); 
} 

Answer 2

Тогда вы должны запускать ajax loader самостоятельно, это можно сделать легко. Он укажет пользователю, что что-то происходит. Также, если возможно, инициализируйте свой метод в каком-то раннем событии страницы, например, pagebeforecreate.

Рабочий пример: http://jsfiddle.net/Gajotres/Zr7Gf/

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

$(document).on('pageshow', '[data-role="page"]', function(){ 
    setTimeout(function(){ 
     $.mobile.loading('hide'); 
    },300);  
}); 

В моем примере SetTimeout необходим, потому что веб-браузеры комплект не будет показывать загрузчик, если она не будет выполнена с SetTimeout или setInterval. Используйте этот блок:

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

когда функция завершена. Если вы хотите узнать больше о событиях на странице jQM, взгляните на мой другой ответ: jQuery Mobile: document ready vs page events или в официальном .

EDIT:

Я забыл, заменить [data-role="page"] с id вашей начальной страницы.