jQuery mobile 1.4.0中的链接单击延迟 [英] Link Click Delay in jQuery mobile 1.4.0

问题描述

在我的jQuery移动应用程序中，我有3个页面，每个页面在一个单独的HTML文件中.首页->第1页包含要提交的表单->第2页，当我单击主页上的Page1链接时，它需要4-单击它以打开并显示Page1后5秒钟.

In my jQuery mobile app , I have 3 pages each one is in a separate Html file Home Page -->Page1 contains Form To submit --> Page 2 , when I click the Page1 link from home Page it takes 4-5 seconds after clicking it to open and show Page1 .

在第2页中，我有一个用于控制移动设备后退按钮的代码，因此当用户在第2页上单击设备后退按钮时，应用无需返回表单即可直接返回首页，而无需返回表单页面"Page1"如果我单击Page1链接，它将打开并直接显示Page1零延迟，此代码提高了jQuery的性能，并提高了作为本机应用程序的单击速度，但是当我从Page2返回后直接单击Page1链接时，就会发生这种情况.然后延迟返回.

In Page2 I have a code for controlling the mobile device back button so when user click the device back button at page2 the app back to the home page directly without passing throw the Form Page "Page1", after back to the home Page if i click on Page1 link it will open and show Page1 directly zero delay , This code has increased the performance of jQuery and make the click speed as native apps ,but this happens when i click Page1 link directly after back from Page2. Then the delay returns .

我不知道这段代码如何以及为什么提高了性能，并且因为它非常讨厌用户在单击按钮然后打开页面后等待4秒钟，所以我尝试在以下情况下采用相同的方式我导航到Page1以提高点击速度，但是没有用！延迟仍然存在.谁能知道为什么控制设备后退按钮的代码提高了速度?

I don't know How and why this piece of code has increased the performance,and because its very annoying to the users to wait 4 seconds after clicking the button then open the Page ,I have tried to apply the same way when I navigate to Page1 in order to increase the click speed , but it didn't work ! the delay still . Any one can know why the code of controlling device back button has increased the speed ?

请帮助我..

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

Code for controlling device back button in 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

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//我试图提高点击速度的方法

Home.js // What I have tried to increase the click speed

$(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();
    }



});

推荐答案

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

The reason the back button navigation is so much faster i preloading. It's already loaded and just needs to be displayed.

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

You can manual preload pages by using

$.mobile.loadPage( "YourPage" );

我在此处概述了几种加快jQuery mobile转换速度的方法:

I outline a few different methods of speeding up transitions in jQuery mobile here: Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap? Even though the query mobile version specified in the answer is dated, the solutions are not.

在注释中需要帮助:

要使用energyze.js，只需在加载jQuery或jQuery mobile之前将其包含在内即可.在此处获取它: https://github.com/davidcalhoun/energize.js

To use energize.js just include it BEFORE loading jQuery or jQuery mobile. Get it here: https://github.com/davidcalhoun/energize.js

在隐藏的div中预加载组件是一种强制jQuery mobile加载当前不需要的组件的怪异方法.只需将您在第2页上使用但不在第1页上使用的组件放在一个隐藏的div中，如下所示:

Preloading components in hidden divs is a hacky way to force jQuery mobile to load components it doesn't currently need. Just put the components you use on page 2 but not on page 1 within a hidden div like so:

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

这篇关于jQuery mobile 1.4.0中的链接单击延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！