Ionic iOS very long load time


I have go my app running well in the browser and it also works well on iPhone 6 and iPad 3 when it has EVENTUALLY loaded.

The app loads initially very quickly, however there is a LONG period of unresponsiveness. During this time the three bar menu (as as the initial Playlist sample app) is not displayed. As soon as this displays then the app functions fine.

The log shows the belo quickly, then I have to wait about 40 secs to 1 min before the app becomes responsive.

The xCode log is below.


2014-12-28 21:51:31.210 Rehab_Guru[8269:4465669] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///private/var/mobile/Containers/Data/Application/2D1A7E53-C23D-465F-B259-58F00DB0383E/Library/Cookies/Cookies.binarycookies
2014-12-28 21:51:31.559 Rehab_Guru[8269:4465669] Apache Cordova native platform version 3.7.0 is starting.
2014-12-28 21:51:31.563 Rehab_Guru[8269:4465669] Multi-tasking -> Device: YES, App: YES
2014-12-28 21:51:31.573 Rehab_Guru[8269:4465669] Unlimited access to network resources
2014-12-28 21:51:31.757 Rehab_Guru[8269:4465669] [CDVTimer][keyboard] 0.542998ms
2014-12-28 21:51:31.757 Rehab_Guru[8269:4465669] [CDVTimer][TotalPluginStartup] 1.417994ms
2014-12-28 21:51:32.472 Rehab_Guru[8269:4465669] Resetting plugins due to page load.
2014-12-28 21:51:33.419 Rehab_Guru[8269:4465669] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/E9720AAA-B083-4F98-A7DF-944FF275B099/


Many thanks


I think that this long load delay may be due to the amount of data being loaded using the following code. This leads to some 5 second delay on the desktop to become responsive (a computer with a lot more power than my iPad, this time is reduced on the iPhone 6 - which has more power than my old iPad). I am loading three JSON files with 70,000 lines of small data - however they are looped through. something which should not take nearly 1 minute?!

I am using the following code in my api.

.service('api', ['$http', '$q', function($http, $q){
var cache = {};

this.loadJsonFile = function(url) {
  var defer = $q.defer();
  if (angular.isDefined(cache[url])) {
    if (angular.isDefined(cache[url]['then'])) {
      return cache[url];
    return defer.promise;

  $http.get(url).success(function(data) {
    cache[url] = data;
  cache[url] = defer.promise;
  return defer.promise;

this.getExcercises = function() {
  return this.loadJsonFile('data/exercises.json');
this.getExcerciseList = function() {
  return this.loadJsonFile('data/exercises_full.json');
this.getImageMap = function() {
  return this.loadJsonFile('data/imagemap.json');

Any advice on the best way to do this would be appreciated.


I would load what data you need first instead of loading all three files at once.
Split things into 3 separate services