Jquery Mobile - 页面转换速度慢

Question

使用 jquery mobile Im 使用持久页眉和页脚。页脚导航具有选项卡，当您单击选项卡时，它会通过 ajax 加载页面。问题是从一个页面到另一个页面的转换，即 ajax 加载具有特定 id 的 div，非常慢。页面转换需要 2-5 秒。当我单击一个选项卡时，它会突出显示不同的颜色但没有任何反应，然后几秒钟后就会发生过渡。有时，如果您单击快速布局中断并且页脚消失。我在 ipad 上使用最新版本的 jquery mobile 执行此操作。 jquery mobile真的很慢吗？等到 ios5 会改变一切吗？

更新

这是一段sn-p代码：

<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

有时如果您单击以加快布局中断和页脚 消失：

这个问题已经在这里解决了，还没有找到解决方案：https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

关于加载时间，这真的很奇怪，尝试通过删除部分代码来关注错误，并缩小加载时间过长的位置和原因...希望这会有所帮助。

Answer 3

您多次使用相同的 ID。对我来说，它引起了类似的问题。尝试删除/更改重复的 ID。

例如，您只需复制粘贴此部分以将其复制到第二页：

<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>