【问题标题】:JQuery-mobile android page flash during transitionjQuery-mobile android页面在过渡期间闪烁
【发布时间】:2013-09-10 20:53:49
【问题描述】:

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

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

开启硬件加速

设置-webkit-backface-visibility:隐藏;

在 JQuery-mobile 等中放大。

这真的要我死了。

【问题讨论】:

    标签: jquery-mobile cordova


    【解决方案1】:

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

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

    这对我来说已解决的问题。我相信它已经为您解决了。
    对不起,我的英语很差。@@

    【讨论】:

    • 你能发布你的代码吗?我想我可以帮助你,因为我和你有同样的问题。我一直在 android + JQM 中开发 Phonegap。我使用列表视图,在转换时添加了非常多的项目,但它没有闪烁(我在真实设备中测试过)。我的应用有 10 多页,而且过渡非常流畅。
    • 代码很重,很难发布,我没有加载外部 url,但是有很重的主干结构,从本地或在线数据库构建视图。我会尝试得到一些干净的代码。
    • 好的。我明白为什么你的过渡是轻弹的。在页面 B 加载完成之前从页面 A 转换到页面 B。这意味着,当您转到页面 B 时,页面 B 开始从数据库、服务器等加载数据。它使您的页面闪烁。您可以尝试在一个页面中使用多个页面(JQM),它会解决问题(我已经使用它与 20page)。
    • 所以我认为你不应该使用过渡。页面较小时过渡会平滑。
    【解决方案2】:

    在调用 Jquery 移动 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>
    

    够了.....refer

    【讨论】:

      【解决方案3】:

      添加user-scalable=no 可以解决问题。

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

      来源

      Solution to flicker problem in jQuery mobile page transitions!

      看评论

      【讨论】:

      • 这为我解决了问题。谢谢。
      【解决方案4】:

      我知道你正在经历的痛苦。不幸的是,Android 在 jQM 的转换中如此受欢迎。

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

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

      【讨论】:

      • 好吧。也许这是唯一的方法,我真的希望 JQuery-mobile 转换能够在 android 上运行。
      • 好吧,没有也可以,但这是我最后会求助的。
      【解决方案5】:

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

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

      祝你好运。

      【讨论】:

      • 很遗憾,我厌倦了所有建议,但没有成功。
      • 这也是我的情况,直到我找到我分享给你的链接。
      • 我按照链接的建议做了。删除缩放线并将硬件设置为false,但这没有帮助。您还引用了哪种方法?
      • 首先我下载了​​开发者版本的 jquery.mobile 文件。我搜索并删除了 meta.attr 行(“content”,disabledZoom)和 meta.attr(“content”,enabledZoom)。最后我删除了 .Apk 文件 Android 项目并再次使用 Eclipse 生成了应用程序。
      • 我做了所有这些步骤..闪烁仍然存在。我认为这可能与我正在加载的繁重页面有关..
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2023-03-16
      • 2012-06-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多