jQuery mobile 1.4.0 中的链接点击延迟

Question

在我的 jQuery 移动应用程序中，我有 3 个页面，每个页面都在一个单独的 Html 文件中 主页 --> Page1 包含要提交的表单 --> 第 2 页，当我从主页单击 Page1 链接时，需要 4-点击后5秒打开并显示Page1。

在Page2中，我有一个用于控制移动设备后退按钮的代码，因此当用户在page2处单击设备后退按钮时，应用程序直接返回主页而不通过抛出表单页面“Page1”，然后返回主页如果我单击 Page1 链接，它将打开并直接显示 Page1 零延迟，此代码提高了 jQuery 的性能并使点击速度成为本机应用程序，但是当我从 Page2 返回后直接单击 Page1 链接时会发生这种情况。然后延迟返回。

我不知道这段代码是如何以及为什么提高了性能，并且因为它让用户在点击按钮后等待 4 秒然后打开页面非常烦人，所以我尝试在以下情况下应用相同的方式我导航到 Page1 以提高点击速度，但它没有用！延迟还在。任何人都知道为什么控制设备返回按钮的代码提高了速度？

请帮帮我..

Page2中控制设备返回按钮的代码

    $(document).on("pagebeforechange", function (e, data) {

       if (data.toPage && data.options.fromPage) {
          var _from = data.options.fromPage[0].id;
          var _to = data.toPage[0].id;
          if (_from === "page2" && _to === "FormPage") {
             $.mobile.pageContainer.pagecontainer("change", "Home.html");
              e.preventDefault();
               }
          }
      });

主页

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed">
         <h1>Header - Home</h1>

    </div>
    <div data-role="content"></div>
    <a href="FormPage.html" data-transition="none"  class="ui-btn"  data-         role="button">Page1</a>

    <div data-role="footer" data-position="fixed">
         <h1>Footer</h1>

    </div>
</div>

FormPage.html

 <!-- Page 1 -->
 <div data-role="page" id="FormPage">
     <div data-role="header" data-position="fixed">
         <h1>Header - Page 1</h1>

    </div>
    <div data-role="content"></div>
     <form>
     // form elements 
     <div   class="ui-btn ui-input-btn ui-icon-check " >                                                   
        <input type="button" id="submit" data-inline="true" value=" submit"    data-iconpos="left" />

      </div> 
    <div data-role="footer" data-position="fixed">
         <h1>Footer</h1>

    </div>
</div>

Home.js // 我尝试提高点击速度的方法

$(document).on("pagebeforechange", function (e, data)
{

  if (data.toPage && data.options.fromPage) {
    var _from = data.options.fromPage[0].id;
    var _to = data.toPage[0].id;
    if (_from === "Home" && _to === "FormPage") {
        $.mobile.pageContainer.pagecontainer("change", "FormPage.html");
        e.preventDefault();
    }



});

Answer 1

我预加载后退按钮导航速度如此之快的原因。它已经加载，只需要显示。

您可以使用手动预加载页面

$.mobile.loadPage( "YourPage" );

我在这里概述了几种不同的加速 jQuery mobile 转换的方法：Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap? 即使答案中指定的查询移动版本已过时，但解决方案却没有。

编辑：在 cmets 中需要帮助：

要使用 energet.js，只需在加载 jQuery 或 jQuery mobile 之前包含它。在这里获取：https://github.com/davidcalhoun/energize.js

在隐藏的 div 中预加载组件是强制 jQuery mobile 加载它当前不需要的组件的一种很老套的方法。只需将您使用的组件放在第 2 页而不是第 1 页的隐藏 div 中，如下所示：

<div style=display:none> //COMPONENTS HERE </div>