Jquery Mobile code for Flickering Navigation with PhoneGap

Question

我相信这篇文章可以解决我的麻烦在页面之间导航时闪烁。具体说来：

$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});

我来自C#世界，对jQuery移动设备几乎一无所知。我想添加这个片段，但不确定在哪里。如果这很重要，我认为我会将其添加到jquery.mobile-1.1.0.rc.1.js但我不知道那里的位置，如果这是正确的文件。

Answer 1

此代码必须在包含 jQuery Core 之后和包含 jQuery Mobile 之前运行。原因是要运行代码，jQuery 必须存在，但在 jQuery Mobile 初始化之前需要绑定此事件处理程序。

例如：

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

文档：http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

此外，UA 嗅探不是必需的，因为 jQuery Mobile 会测试设备的 CSS 3D 转换支持，并且仅在支持它们的设备上使用漂亮的过渡。这是在jQuery Mobile 1.1.0+中为您完成的，但是默认的回退转换是fade的，因此无论如何您都必须更改该默认值。

为非 3D 支持定义回退过渡

默认情况下，除淡入淡出之外的所有过渡都需要支持 3D 变换。 缺少 3D 支持的设备将回退到淡入淡出过渡， 无论指定的过渡如何。我们这样做是为了主动 从高级版中排除性能不佳的平台，如 Android 2.x 过渡并确保他们仍然拥有流畅的体验。请注意， 有一些平台，如Android 3.0在技术上支持3D 转换，但动画性能仍然很差，因此不会 保证每个浏览器都是100%无闪烁的，但我们尝试 负责任地定位这一点。

不支持 3D 转换的浏览器的回退过渡 可以为每种过渡类型配置，但默认情况下我们指定 "淡入淡出"作为后备。例如，这将设置回退 滑出过渡到"无"的过渡：

$.mobile.transitionFallbacks.slideout = "none"

来源： http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

作为一般观察，我注意到您将 if/then 语句放在事件处理程序中，您也可以将其放在外部，这样如果它不是 Android 设备，则事件绑定/触发永远不必发生。

例如：

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
if (navigator.userAgent.indexOf("Android") != -1)
{
    $(document).bind("mobileinit", function()
    {
      $.mobile.defaultPageTransition = 'none';
      $.mobile.defaultDialogTransition = 'none';
    });
}
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Answer 2

我确实遇到了同样的问题，而且网上的解决方案似乎都不起作用。我正在使用 Android 2.3.6 的 Galaxy mini 上进行测试，甚至褪色在用户体验方面也很糟糕。

摆弄我的代码，运气不好，我发现这在一定程度上提高了我的性能

$(document).on("mobileinit", function(){
        $.mobile.defaultPageTransition = 'slide';
        $.mobile.transitionFallbacks='none';
});

仿佛奇迹般，没有闪烁！偶尔会出现一些故障，但绝对比以前更好！