0

My index.html simply holds a lot of page holders:

<body>
  <div data-role="page" id="homePage"></div>
  <div data-role="page" id="registrationPage"></div>
  <div data-role="page" id="walletPage"></div>
  .. and a lot of page holders
</body>

My Javascript is loading all the pages at run time:

var resources = [{
  id: "#homePage",
  url: "pages/homePage.html"
},
{
  id: "#walletPage",
  url: "pages/walletPage.html"
}] ...
$(document).ready(function() {
  $.mobile.defaultPageTransition = "slide";
  loadResource()
})

Everything is wrapped inside Phonegap to deliver a native app. Now the problem is all my dynamic pages first-time sliding animation is screwed up on iPhone. From the second time onwards, everything works as expected. It seems to me like some sort of browser caching problem.

Any suggestion how I can resolve or debug it?

Gajotres
  • 57,309
  • 16
  • 102
  • 130
nitesh sharma
  • 591
  • 2
  • 6
  • 16

1 Answers1

1

Standard Phonegap + jQuery Mobile for this problem is to use require.js as a resource pre loader. Basically you will use require.js to load everything during the app initialization.

Your other 'possible' problem is document ready. Unlike basic jQuery where ready function is a common it should not be used with jQuery Mobile. jQuery Mobile page loading is not related/tied to document ready state. Because when document ready state triggers jQuery Mobile is still loading/enhancing pages into the DOM. This could be a cause of your problems.

To fix this problem jQM developers have created another set of page states called page events and there are few of them. To find out more read my other article/answer: jQuery Mobile: document ready vs page events

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130