Link Click Delay in jQuery mobile 1.4.0

问题

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 .

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 .

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 ?

Please help me ..

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

Home Page

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



});

回答1:

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" );

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.

EDIT: Wanted help in the comments:

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

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>

来源：https://stackoverflow.com/questions/21501565/link-click-delay-in-jquery-mobile-1-4-0

标签

jquery-mobile