延迟渲染Android应用程序与科尔多瓦5和jQuery Mobile的

问题描述 投票:1回答:1

我使用的是科尔多瓦和jQuery Mobile的开发Android应用程序。一切都很好,但是,当我运行的应用程序到智能手机其延迟一个或多个第二渲染了jQuery。

首先,在“即时0”渲染只有“纯HTML”。之后,在“瞬1”时,jQuery Mobile的组件呈现。即食0和1之间的间隙为大约1秒的东西。

下面的图像示出了在时刻0和1。

即时0

即时1

现在的问题是:它可以消除这个延迟时间?

jQuery Mobile的:1.4.3

Android平台:4.4.2

IDE:Eclipse的月亮

智能手机:摩托克2-与Android奇巧5.0.2

源代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, 
        initial-scale=1">
<link rel="stylesheet" type="text/css"
    href="jquery/jquery.mobile-1.4.3.min.css" />
</head>
<body>
    <div data-role="page" id="pg-cadastro-aluno">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        <div data-role="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed consectetur nisl, ac mattis nunc. Integer a lacus volutpat, mattis felis eu, ornare eros. Vestibulum cursus leo nec imperdiet cursus. Aliquam id eleifend lacus, ac posuere arcu. In a elit vel arcu aliquam congue. In hac habitasse platea dictumst. Duis quis erat et erat facilisis laoreet. Cras pharetra nunc vitae augue vulputate vulputate. Quisque nec ante sed purus vehicula laoreet eget at leo.          
            </p>
        </div>
        <div data-role="footer">
            <h1>FOOTER</h1>
        </div>      
    </div>  
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8"
        src="jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" charset="utf-8"
        src="jquery/jquery.mobile-1.4.3.min.js"></script>
</body>
</html>

重要提示:这里介绍的instantes和源代码都是唯一的应用程序的一个非常简单的版本来说明我的situation.The真正的应用程序比较复杂,但呈现组件deley即使在这个简单的版本保持。

android cordova jquery-mobile
1个回答
0
投票

运行科尔多瓦/ jQuery Mobile的一个坚固耐用的Android,这是非常缓慢的,当我有同样的问题。

我的解决方案,这伟大的工作,是在<head>部分,而不是在底部的HTML顶部加载jQuery Mobile的脚本。把所有其他脚本在底部。

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Put JQuery Mobile scripts at top -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <!-- JQuery Mobile stylesheets -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  </head>

  <body>
    <div data-role="page" id="pg-cadastro-aluno">
      <div data-role="header">
      <h1>HEADER</h1>
      </div>
      <div data-role="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed consectetur nisl, ac mattis nunc. Integer a lacus volutpat, mattis felis eu, ornare eros. Vestibulum cursus leo nec imperdiet cursus. Aliquam id eleifend lacus, ac posuere arcu. In a
          elit vel arcu aliquam congue. In hac habitasse platea dictumst. Duis quis erat et erat facilisis laoreet. Cras pharetra nunc vitae augue vulputate vulputate. Quisque nec ante sed purus vehicula laoreet eget at leo.
        </p>
      </div>
      <div data-role="footer">
        <h1>FOOTER</h1>
      </div>
    </div>

    <!-- Put all other scripts here at bottom -->
    <script src="cordova.js"></script>

    </body>
</html>

看到这个的jsfiddle:https://jsfiddle.net/bckq9om8/

© www.soinside.com 2019 - 2024. All rights reserved.