Как отобразить диалоговое окно прогресса при переходе с одной страницы на другую с помощью jquery mobile?

Question

Я занимаюсь разработкой приложения с использованием jquery mobile. В этом я хочу показать что-то вроде диалога прогресса с одной страницы на другую.

Я пытался

$.mobile.showPageLoadingMsg();

, но при отображении отображается определенное количество времени ...

На самом деле моя вторая страница загружает несколько графиков, так что это занимает время ... Как мы можем показать прогресс, как только график загрузится на другую страницу?

Answer 1

Я думаю, вы можете использовать такие события, как pagebeforecreate или pagecreatelike И размещение $ .mobile.showPageLoadingMsg () в нужном месте в коде может поставить главное.

$('#aboutPage').live('pagebeforecreate',function(event){
  alert('This page was just inserted into the dom!');
});  
$('#aboutPage').live('pagecreate',function(event){
  alert('This page was just enhanced by jQuery Mobile!');
});

Вы можете пойти, как следующие: http://jquerymobile.com/demos/1.0a3/#docs/api/events.html

Answer 2

Если вы используете AJAX для переключения между страницами, вы можете сделать следующее:

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loadingDiv').show()
  },
  complete: function(){
     $('#loadingDiv').hide()
  },
  success: function() {}
});

«loadingDiv» - это ваш контейнер с изображением GIF (например)).

Answer 3

Окружите его в

$(document).ready(function() { ... }

если вы еще не