JQuery-移动android页面在转换过程中闪烁

Question

我在android上使用带有phonegap的JQuery-mobilw，在多台机器上进行了测试，但是当使用页面转换时，从页面a到b，它首先转换到b，然后a显示了一会儿，然后再次显示b。有时这种闪烁甚至是值得的。

我使用的是 1.4 JQuery-mobile，但问题已经存在于 1.3.2 中。我尝试了从网上找到的所有可能的建议，但没有一个有效。这些包括

开启硬件加速

设置-webkit-backface-visibility：隐藏；

JQuery-mobile 等中的缩放功能

这真是要了我的命。

Answer 1

在 JQM 中，当从 A-->B 转换时在 DOM 中添加任何动态内容。有时这种闪烁甚至是值得的，因为页面 B 还没有真正准备好（没有添加更多任何东西完成）。您必须确保B页真正准备好。为此，您可以使用 setTimeout() 来修复转换时的闪烁。在javascript中，所有语句都会同时运行（多线程，它非常有用，但有时控制也非常复杂）。
如果从 A 转换到 B 时未在页面 B 中添加任何内容，那么有时它会闪烁。请尝试setTimeout()，你会看到过渡非常非常好，非常非常平滑。

setTimeout(function(){$.mobile.changePage('#page_mail_content', { transition: "slide"});},300);

这解决了我的问题。我相信它已经为你解决了。
抱歉，我的英语很糟糕。@@

Answer 2

在调用 Jquery mobile js 之前你需要做一些事情，如下所示：

 <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
                    <script type="text/javascript">
                    $(document).bind("mobileinit", function()
                    {
                       if (navigator.userAgent.indexOf("Android") != -1)
                       {
                         $.mobile.defaultPageTransition = 'none';
                         $.mobile.defaultDialogTransition = 'none';
                       }
                    });
                    </script>
                    <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

够了.....参考

Answer 3

添加

user-scalable=no

即可解决问题。

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"> 

来源

解决jQuery移动页面转换闪烁问题！

看评论

Answer 4

我知道你正在经历的痛苦。不幸的是，Android 与 jQM 的转换如此偶然。

您是否也尝试过将后备过渡设置为“无”？

$.mobile.transitionFallbacks.slideout = "none";

Answer 5

我在这个位置解决了这个问题：

https://github.com/jquery/jquery-mobile/issues/5431

祝你好运。

Answer 6

您需要将链接或按钮的数据转换属性设置为“无”

例如：

<a href="#test_page" data-transition="none" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Test Page</a>

要了解有关 JQuery Mobile 中的转换的更多信息，您可以参考官方文档： https://demos.jquerymobile.com/1.4.5/transitions/

您可能需要在所有链接上动态执行此操作，如下所示：

$(document).ready(function() {
    $('a').attr('data-transition', 'none');
});