Jquery使用PhoneGap的Flickering导航的移动代码 [英] Jquery Mobile code for Flickering Navigation with PhoneGap

问题描述

我相信这篇文章是我的麻烦的决议
在页面之间导航时闪烁。
具体：

I believe this post is the resolution to my trouble Flickering when navigating between pages . Specifically:

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

我来自C＃世界，对于 jQuery mobile。我想添加这个代码段，但不知道在哪里。如果重要我认为我会添加到 jquery.mobile-1.1.0.rc.1.js ，但然后我不知道在哪里，如果这是正确的文件。

I am coming from the C# world and pretty much clueless as to jQuery mobile. I would like to add this snippet but not sure where. If it matters I think that I would add it to jquery.mobile-1.1.0.rc.1.js but then I don't know where in there, If that's the right file.

推荐答案

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

This code must be run after you include jQuery Core and before you include jQuery Mobile. The reason is that to run the code, jQuery must be present, but this event handler needs to be bound before jQuery Mobile initializes.

例如：

<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 ，所以你必须改变默认值。

Also, the UA sniffing isn't necessary because jQuery Mobile tests the device for CSS 3D transform support and only uses the nice transitions on devices that support them. This is done for you in jQuery Mobile 1.1.0+, but the default fallback transition is fade so you'd have to change that default anyway.

为非3D支持定义备用过渡

除了褪色需要3D变换支持。
缺少3D支持的设备将退回到淡入淡出转换，
，无论指定的转换如何。我们这样做是主动
从高级
转换中排除表现不佳的平台，如Android 2.x，并确保他们仍然有一个顺利的体验。注意，
有平台，如Android 3.0，技术上支持3D
变换，但仍然有差的动画性能，所以这不会
保证每个浏览器将100％无闪烁，但

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.

不支持3D转换的浏览器的回退转换可以为每个转换类型配置
，但是默认情况下我们指定
fade作为后备。例如，这会将slideout转换的回退
转换设置为none：

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"

a href =http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html =nofollow> http://jquerymobile.com/demos/1.1.0/docs/ pages / webpage-transitions.html

作为一般观察，我注意到你把 if / then 语句里面的事件处理程序，你可以把它放在外面，所以如果它不是一个Android设备的事件绑定/触发永远不会发生。

As a general observation I noticed that you put the if/then statement inside the event handler, you might as well put it outside so if it isn't an Android device the event binding/firing never has to occur.

例如：

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

这篇关于Jquery使用PhoneGap的Flickering导航的移动代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！