cordova/phonegap jquery 手机启动太慢

Question

我正在使用最新版本的 cordova (phonegap) 我的想法：从我启动应用程序到加载过程结束显示加载页面（在设备就绪时，从 API 获取帖子等），然后隐藏加载页面并向用户显示索引. 我面临的问题是应用程序的启动速度太慢，加载页面只出现 1 秒，即使应用程序没有完成加载过程也会消失（前 3 秒我出现黑屏）。这是我的代码： Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/jqmobile.js"></script>
    </head>
    <body>
    <div data-role="page" id="loading">
    <span id="loading_container">
     <div class="mini_logo"></div>
     <div class="loading"></div>
    </span>
    </div>
  <div data-role="page" class="hide" id="index" data-cache="never">
    <div data-role="panel" id="panel" data-position="right" data-theme="a" data-display="push"  data-position-fixed="true">
    <div id="logo"></div>
    <div id="socialnetworks">
    <a href="#" class="linkedin"></a>
    <a href="#" class="youtube"></a>
    <a href="#" class="gplus"></a>
    <a href="#" class="twitter"></a>
    <a href="#" class="facebook"></a>
    </div>
    <ul id="menuIcons">
    <li><a href="index.html" rel="external">الرئيسية</a></li>
    </ul>
    
    
    </div>

    <div data-role="header" data-position="fixed">
      <a data-iconpos="notext" href="#panel" data-role="button" data-icon="bars" class="ui-nodisc-icon" style="background:transparent !important; border:0 !important; box-shadow:none !important;margin:3px 3px 0 0 !important"></a>
      <h1>News</h1>
      <a data-iconpos="notext" href="javascript::void(0)" id="refresh" data-role="button" data-icon="refresh" class="ui-nodisc-icon" style="background:transparent !important; border:0 !important; box-shadow:none !important;margin:3px 3px 0 0 !important"></a>
    </div>

    <div data-role="content" role="main" id="posts_list">
    </div>
  </div>
    </body>
</html>

我的 index.js 文件：

var serviceURL = "http://somesite.com/wordpress/?json=";
//THIS CODE SHOULD BE PART OF A FILE WHICH IS LOADED BEFORE jQueryMobile

/**
* Create couple of jQuery Deferred Objects to catch the 
* firing of the two events associated with the loading of
* the two frameworks.
*/
var gapReady = $.Deferred();
var jqmReady = $.Deferred();
var categoriesReady = $.Deferred();
var postsReady = $.Deferred();

//Catch "deviceready" event which is fired when PhoneGap is ready
document.addEventListener("deviceReady", deviceReady, false);

//Resolve gapReady in reponse to deviceReady event
function deviceReady()
{
 gapReady.resolve();
}

/**
* Catch "mobileinit" event which is fired when a jQueryMobile is loaded.
* Ensure that we respond to this event only once.
*/
$(document).one("mobileinit", function(){
 $.mobile.page.prototype.options.domCache = false;
 jqmReady.resolve();
});

/**
* Run your App Logic only when both frameworks have loaded
*/
$.when(gapReady, jqmReady,getCategoriesList(),getData()).then(init);

function getCategoriesList(){
 $.getJSON(serviceURL + 'get_category_index', function(data) {
  cats = data.categories;
  $.each(cats, function(index, cat) {
   $("#menuIcons").append('<li><a data-ajax="false" href="category.html?id='+cat.id+'">'+cat.title+'</a></li>');
  });
 });
 categoriesReady.resolve();
}
// App Logic
function init()
{
 $('#index').removeClass('hide');
  $(':mobile-pagecontainer').pagecontainer('change', '#index', {
        transition: 'flip',
        changeHash: false,
        reverse: true,
        showLoadMsg: false
    });
 
}
function getData() {
 $.getJSON(serviceURL + 'get_recent_posts&page=1', function(data) {
  posts = data.posts;
  $.each(posts, function(index, post) {
   id = post.id;
   title = post.title;
   thumb = post.thumbnail;
   comments = post.comment_count;
   author  = post.author['name'];
     $('#posts_list').append('<a href="post.html?id='+id+'" data-ajax="false"><div class="single-post">'
     +'<div class="img"><img data-original="'+thumb+'" class="lazy" title="" /></div>'
     +'<div class="info">'
     +'<div class="title">'+title+'</div>'
     +'<div class="stats"><span class="author">'+author+'</span> <span class="comments">'+comments+' comments </span></div>'
     +'</div>'
     +'</div></a>');
  });
 });
 
 postsReady.resolve();
}

谁能给我一些建议来实现我的主要目标？发布示例会很棒。

Answer 1

启动 phonegap 应用程序后，首先发生的事情是加载 cordava。所以在这一点上你不能用你的 javascript 代码做任何事情，此时你会看到你的闪屏。几秒钟后它会消失，但你可以通过设置 config.xml:

来防止这种情况

<preference name="AutoHideSplashScreen" value="false" />

现在你需要手动隐藏它，你可以通过在你的设备准备好以下行来做到这一点，例如：

navigator.splashscreen.hide()

cordova/phonegap jquery 手机启动太慢

cordova/phonegap with jquery mobile too slow startup

mobile

jquery

mobile-application

jquery-mobile

cordova