Jquery Mobile - медленно с переходами страниц

Question

Использование jquery mobile Я использую постоянный колонтитул.В навигационной панели нижнего колонтитула есть вкладки, и когда вы щелкаете по вкладке, она загружает страницу через ajax.Проблема в том, что переход с одной страницы на другую, то есть ajax, загрузка div с определенным идентификатором происходит очень медленно.Переход страницы занимает 2-5 секунд.когда я щелкаю по вкладке, она выделяется другим цветом, но ничего не происходит, а через несколько секунд происходит переход.Иногда, если вы нажмете, чтобы быстро, макет разрывается и нижний колонтитул исчезает.Я делаю это на Ipad с последней версией JQuery Mobile.JQuery Mobile действительно очень медленно?Будет ли ждать, пока ios5 все изменит?

ОБНОВЛЕНИЕ

Вот фрагмент кода:

<div data-role="page" id="page1">
  <div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider"><span class="ui-li-count">2</span></li>
      <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
      </li>
</ul>
  <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b">
      <ul>
        <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
        <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
        <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>
      </ul>
    </div>
  </div>

<div data-role="page" id="page2">
  <div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider"><span class="ui-li-count">2</span></li>
      <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
      </li>
</ul>
  <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b">
      <ul>
        <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
        <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
        <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>
      </ul>
    </div>
  </div>

Answer 1

Я столкнулся с той же проблемой. Отключение причудливых переходов экрана исправило это для меня.

Чтобы сделать это универсально:

$.mobile.defaultPageTransition = 'none';

Answer 2

Иногда, если вы нажмете, чтобы ускорить разрывы макета и нижний колонтитул dissappears:

Эта проблема уже решена здесь, решение пока не найдено: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

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

Answer 3

Вы используете одни и те же идентификаторы несколько раз.Для меня это вызвало похожие проблемы.Попробуйте удалить / изменить дублирующиеся идентификаторы.

Например, вы просто скопировали этот раздел, чтобы скопировать его на второй странице:

<li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
<li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
<li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>