Delay render Android App with Cordova 5 and jQuery Mobile
Question
I'm developing an Android App using Cordova and jQuery Mobile. Everything was fine, but, when I run the app into the smartphone its delay one or more second to render the jQuery.
First, at "Instant 0" is rendered only the "pure HTML". After, at "Instant 1", the jQuery Mobile components are rendered. The gap between Instants 0 and 1 is something around one sec.
The images below illustrate the Instants 0 and 1.
Instant 0
Instant 1
The question is: It is possible to eliminate this delay time?
jQuery Mobile: 1.4.3
Android Platform: 4.4.2
IDE: Eclipse Luna
Smartphone: Moto G 2 with Android KitKat 5.0.2
Source Code
<!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>
Important: The instantes and source code presented here are only a very simple version of app to illustrate my situation.The real app is more complex, but the deley to render components is kept even in this simple version.
1 answers
solution1
0 2019-02-05 02:21:03
I had the same issue when running Cordova/JQuery Mobile a ruggedised Android that was very slow.
My solution, which worked great, was to load the JQuery Mobile scripts at the top of the HTML in the <head> section rather than at the bottom. Put all other scripts at the bottom.
<!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>
See this jsFiddle: https://jsfiddle.net/bckq9om8/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.