Как показать загрузку страницы spinner в jQuery mobile

Я пытаюсь показать spinner страницы, используя нижеприведенный код в jQuery mobile 1.3 Android родное приложение, но оно не работает, может кто-нибудь помочь мне, что это проблема и как сделать она работаетКак показать загрузку страницы spinner в jQuery mobile

</head> 
    <body> 
    <div id="createPage" data-role="page"> 
    <script> 
    $("#createPage").on("pageshow", function(event, ui) { 
    $mobile.loading('show'); 
    processCreateBtnAction(); //This takes 5 seconds to complete the operation 
    $.mobile.loading('hide'); 
}); 
</script> 
<div data-role="header" data-position="fixed"></div>

источник

2013-07-08 srinik

ПРИМЕЧАНИЕ: у вас есть $ mobile, а не $ .mobile. Надеюсь, это не ваша ошибка? – asgeo1

О, я думаю, «.» пропустили в моем коде – srinik

Другие ответы хороши. Я лично использую несколько другую вариацию одной и той же базовой техники - создаю достаточно большой разрыв в обработке Javascript, чтобы пользовательский интерфейс имел достаточно времени для перерисовки.

$("#createPage").on("pageshow", function(event, ui) { 
    $.mobile.loading('show'); 
    setTimeout(function(){ 
     processCreateBtnAction(); //This takes 5 seconds to complete the operation 
     $.mobile.loading('hide'); 
    }, 20); 
});

Это создаст 20-миллисекундный тайм-аут после вызова 'show'. Для этого достаточно времени, чтобы пользовательский интерфейс перерисовывался до того, как вызывается функция тяжелого процесса CPUCreateBtnAction().

Я экспериментировал с различными таймингами и обнаружил, что 20 миллисекунд - лучший тайм-аут для использования. Некоторые люди пытаются использовать 0 или что-то в этом роде, что будет работать на более быстрых устройствах. Но на iPad 1 или что-то вроде того, что довольно медленно, вам нужно иметь приличный тайм-аут, иначе у вас не будет достаточно времени для перерисовки экрана.

источник

2013-07-08 21:04:31 asgeo1

Спасибо, что это помогло. – srinik

Javascript немного отличается от других языков программирования, поскольку он не будет ждать действий в рамках функции processCreateBtnAction() завершить до перехода на следующую строку - поэтому ваша вертушка в настоящее время скрыта.

Один из способов использования функций обратного вызова (как в Javascript, функции могут передаваться как объекты). Что-то вдоль линий:

$("#createPage").on("pageshow", function(event, ui) { 
    $mobile.loading('show'); 
    processCreateBtnAction($.mobile.loading('hide')); 
}); 

function processCreateBtnAction(callback) { 
    // Rest of your function here 

    callback(); // $.mobile.loading('hide') will be called here. 
}

источник

2013-07-08 12:37:10

Если 'processCreateBtnAction()' делает что-то асинхронно (как следует из названия), JS должен ждать завершения функции до того, как она скроет throbber. Поэтому он не имеет ничего общего с javascript как языком, а не тем, что он делает в этой функции. – Mansfield

Попробуйте это вместо $mobile.loading('show');:

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

источник

2013-07-08 19:15:29 dejavu

Как показать загрузку страницы spinner в jQuery mobile

ответ

Смежные вопросы