使用Cordova 5和jQuery Mobile延遲渲染Android App

Question

我正在使用Cordova和jQuery Mobile開發一個Android應用程序。 一切都很好，但是，當我將應用程序運行到智能手機中時，它會延遲一秒或更長時間來呈現jQuery。

首先，在“即時0”處僅呈現“純HTML”。 之后，在“即時1”處，呈現jQuery Mobile組件。 瞬間0和1之間的間隔大約為一秒。

下圖顯示了Instants 0和1。

即時0

在此處輸入圖片說明

即時1

在此處輸入圖片說明

問題是：可以消除這種延遲時間嗎？

jQuery Mobile： 1.4.3

Android平台： 4.4.2

IDE： Eclipse月神

智能手機：配備Android KitKat 5.0.2的Moto G 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>

重要提示：此處提供的實例和源代碼只是一個非常簡單的應用程序版本，用以說明我的情況。真實的應用程序更為復雜，但即使在此簡單版本中也保留了渲染組件的便利。

Answer 1

在運行非常慢的加固型Android Cordova / JQuery Mobile時，我遇到了相同的問題。

我的解決方案效果很好，它是將JQuery Mobile腳本加載在<head>部分而不是底部的HTML頂部。 將所有其他腳本放在底部。

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

使用Cordova 5和jQuery Mobile延遲渲染Android App

問題描述

1 個解決方案

解決方案1
0 2019-02-05 02:21:03

使用Cordova 5和jQuery Mobile延遲渲染Android App

問題描述

1 個解決方案

解決方案1 0 2019-02-05 02:21:03

解決方案1
0 2019-02-05 02:21:03