I'm using latest version of cordova (phonegap) my idea : showing a loading page from the time i started the app until the finish of the loading process(on deviceready , getting posts from the API ..etc) and then hide the loading page and show the user the index . the problem i face is the startup of the app is too slow and loading page appear only for 1 second and disappear even if the app didn't finished the loading process (the first 3 seconds i'm getting a black screen). this is my code : 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>My index.js file :
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();
}please can anyone give me some advices to acheive my main aim ? posting examples will be great .
