Question

我的index.html只是拥有很多页面持有者：

<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>

我的Javascript正在运行时加载所有页面：

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

所有内容都包含在Phonegap中，以提供原生应用。现在问题是我所有的动态页面首次滑动动画都搞砸了iPhone。从第二次开始，一切都按预期工作。在我看来，这似乎是某种浏览器缓存问题。

有关我如何解决或调试它的任何建议吗？

Answer 1

标准Phonegap + jQuery Mobile解决此问题的方法是使用 require.js 作为资源预加载器。基本上，您会在应用初始化期间使用 require.js 加载所有内容。

您的其他“可能”问题是文档就绪。与基本的jQuery不同，其中ready函数是常见的，它不应该与jQuery Mobile一起使用。 jQuery Mobile页面加载与文档就绪状态无关。因为当文档就绪状态触发时，jQuery Mobile仍在将页面加载/增强到DOM中。这可能是您遇到问题的原因。

为了解决这个问题，jQM开发人员创建了另一组称为页面事件的页面状态，但很少有这些状态。要了解更多信息，请阅读我的其他文章/答案： jQuery Mobile: document ready vs page events

jQuery移动转换在iPhone上表现得很奇怪

1 个答案: