jquery-mobile - 使用 PhoneGap 进行闪烁导航的 Jquery Mobile 代码

Question

我相信这篇文章可以解决我的麻烦
Flickering when navigating between pages .
具体来说:

$(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 初始化之前绑定(bind)。

例如:

<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所以无论如何你都必须改变这个默认值。

Defining fallback transitions for non-3D support

By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

$.mobile.transitionFallbacks.slideout = "none"

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

作为一般性观察，我注意到您将 if/then事件处理程序中的语句，您不妨将它放在外面，因此如果它不是 Android 设备，则永远不必发生事件绑定(bind)/触发。

例如:

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