使用 PhoneGap 进行闪烁导航的 Jquery Mobile 代码答案

【问题标题】：Jquery Mobile code for Flickering Navigation with PhoneGap使用 PhoneGap 进行闪烁导航的 Jquery Mobile 代码
【发布时间】：2014-10-13 23:35:25
【问题描述】：

我相信这篇文章可以解决我的问题 Flickering when navigating between pages 。具体来说：

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

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

【问题讨论】：

我刚刚注意到你正在使用 jQuery Mobile 1.1.0 RC-1，你真的应该更新到 1.1.0 Final：jquerymobile.com/download

标签： jquery-mobile cordova

【解决方案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>

【讨论】：

哇！这非常冗长，非常有帮助！谢谢你！至于代码的位置....啊，这表明我知道的很少。我想把它放在一个 js 文件中，但实际上它在 html 文档中内联。
@user1278561 您可以将代码放在 jQuery Core 文件的末尾，因为此时 jQuery Core 将可用于执行事件绑定，但 jQuery Mobile 不会尚未初始化。

【解决方案2】：

我确实有同样的问题，网上的解决方案似乎都不起作用。我正在使用 Android 2.3.6 在 Galaxy mini 上进行测试，就 UX 而言，甚至褪色也很糟糕。

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

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

仿佛奇迹般，没有闪烁！偶尔会出现一些小故障，但肯定比以前好多了！

【讨论】：