Link Click Delay в jQuery mobile 1.4.0

Question

В моем мобильном приложении jQuery у меня есть 3 страницы, каждый из которых находится в отдельном файле Html. Домашняя страница -> Страница1 содержит форму для отправки -> Страница 2, когда я нажимаю кнопку Страница 1 из домашней страницы занимает 4-5 секунд после нажатия на нее, чтобы открыть и показать страницу Page1.

У меня есть код для управления кнопкой возврата мобильного устройства, поэтому, когда пользователь нажимает кнопку возврата устройства на странице 2, приложение возвращается на домашнюю страницу напрямую, не пропуская страницу формы «Страница1», после возвращения домой Страница, если я нажму на ссылку Page1, она откроется и покажет прямую нулевую задержку Page1, этот код увеличил производительность jQuery и сделал скорость клика в качестве родных приложений, но это происходит, когда я нажимаю ссылку Page1 непосредственно после возврата с страницы. Затем задержка возвращается.

Я не знаю Как и почему этот кусок кода увеличил производительность, а потому, что его очень раздражает пользователей ждать через 4 секунды после нажатия кнопки, тогда откройте страницу, я попытался применить то же самое когда я перехожу на страницу1, чтобы увеличить скорость кликов, но это не сработало! задержка все еще. Любой может знать, почему код кнопки управления устройством назад увеличил скорость?

Пожалуйста, помогите мне ..

кода для управления устройством кнопки назад в 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 // Что я ave попытался увеличить скорость нажатия.

$(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 мобильного здесь: Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap? Даже если запрос мобильная версию, указанная в ответе будет датированное, решение не.

EDIT: Требуется помощь в комментариях:

Чтобы использовать energize.js просто включить его перед загрузкой JQuery или JQuery мобильный. Получить его здесь: https://github.com/davidcalhoun/energize.js

Предварительная загрузка компонентов в скрытые divs - это хакерский способ заставить jQuery mobile загружать компоненты, которые в настоящее время не нужны. Просто поставьте компоненты, которые вы используете на стр. 2, но не на странице 1 в скрытом div, например:

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