Question

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

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

我不知道这段代码如何以及为什么会增加性能，并且因为用户在点击按钮后等待4秒然后打开页面非常烦人，我试图以同样的方式应用我导航到Page1以提高点击速度，但它不起作用！延迟仍然。任何人都可以知道为什么控制设备后退按钮的代码增加了速度？

请帮帮我..

第2页中控制设备后退按钮的代码

    $(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? 即使答案中指定的查询移动版本已过时，但解决方案也不是。

编辑：在评论中寻求帮助：

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

在隐藏div中预加载组件是强制jQuery mobile加载当前不需要的组件的一种愚蠢方式。只需将您在第2页上使用但不在第1页上的组件放在隐藏的div中，如下所示：

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

链接点击jQuery mobile 1.4.0中的延迟

1 个答案: