2015-04-03 2 views
0

Я использую последнюю версию cordova (phonegap) моя идея: показ страницы загрузки с момента запуска приложения до завершения процесса загрузки (на deviceready, получение сообщения из API ..etc), а затем скрыть страницу загрузки и показать пользователю индекс. проблема, с которой я сталкиваюсь, - это запуск приложения слишком медленно, и загрузка страницы появляется только в течение 1 секунды и исчезает, даже если приложение не завершило процесс загрузки (первые 3 секунды я получаю черный экран). это мой код: Index.htmlcordova/phonegap с jquery mobile слишком медленный запуск

<!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"> 
 
    \t <div class="mini_logo"></div> 
 
    \t <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() 
 
{ 
 
\t 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(){ 
 
\t $.mobile.page.prototype.options.domCache = false; 
 
\t jqmReady.resolve(); 
 
}); 
 

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

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

пожалуйста, может кто-нибудь дать мне несколько советов для моя главная цель? публикации примеров будут замечательными.

ответ

0

Когда приложение phonegap запускается, первое, что происходит, это загрузка корвавы. Таким образом, в этот момент вы не можете ничего сделать с вашим кодом javascript, и на этом этапе вы увидите свой заставку. Через несколько секунд она исчезнет, ​​но и может предотвратить это путем установки в config.xml:

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

Теперь и нужно, чтобы скрыть это вручную, и может сделать это, поместив следующую строку в deviceready, например:

navigator.splashscreen.hide() 
+0

evenif (по умолчанию) Я не включил/не установил какой-либо всплеск на моем коде? он включен по умолчанию или что? может быть более ясным, пожалуйста, @NIME – Hamzar

+0

Обычно это так, но если у вас нет какого-либо всплеска, u будет видеть черный экран, а кордова загружается. На самом деле вы не можете включить или отключить splashcreen, скорее у вас есть один или нет. U нужно заполнить этот пробел, когда материал загружается. Если u может заставить его загружать за 1 секунду, не используйте какой-либо splashcreen, но использование кордовы практически невозможно. Ваше приложение будет загружаться по крайней мере в течение 3 или 4 секунд. Что вы можете сделать, это использовать скриншот первой страницы в качестве заставки, это дает ощущение, что приложение запускается мгновенно. – NIME

+0

спасибо, что человек, который собирается настроить заставку, это лучшее, что я могу сделать в этот момент .. – Hamzar