Home » Angularjs » Ionic: slow transitions in installed android app

Ionic: slow transitions in installed android app

Posted by: admin November 30, 2017 Leave a comment

Questions:

I have installed an Ionic app (beta 14) on my Android (Lollipop) device using:

ionic platform add android
ionic run android

I have also manually built the app and installed it with adb.

The app uses ion-side-menus, and the animations for the transitions between simple views (list -> detail -> detail) are incredibly laggy on a capable phone. The animation when the side menu slides out is very smooth in contrast.

To further investigate the situation, I served the www directory from my dev machine and opened that page in Chrome on the phone and it was as smooth as one would expect. The app also runs smoothly on iOS devices.

Does anyone have any clues as to why it is so slow when the app is in Ionic, but performs as expected when it is just being rendered in the browser?

Answers:

I faced with the same issue. It’s worse in cases that you need to load a lot of information. In those occasion, I disable the transition effect by setting:

nav-transition=none

if you need to disable the transition from your controller, do the following:

app.controller('ctrl', function($scope,$state, $ionicViewSwitcher){ $scope.goBack = function(){
    $ionicViewSwitcher.nextTransition('none');
    $state.go('back');
});

Questions:
Answers:

I found some solutions by which I face problem in ionic app transitiosn..

  1. After State Change I use this code..

//OnState Change..

$scope.$on('$stateChangeSuccess', function() {

    $ionicLoading.show();

   MyTeamListing();

  })

which hit serve every time when i change state.. which is slow down the app.

i just Remove first line and my code is working fine…

I don’t know it is a good or bad way but its working for me fine..

Transaction is become slow if too much data is load on transaction
so that I use ionic events which load data after transaction done.

$scope.$on('$ionicView.afterEnter', function(){
            console.log("afterEnter"); 
            $ionicLoading.show();
            loadRemoteData();
            $ionicLoading.hide();
});

Questions:
Answers:

Well, the perks of developing hybrid application is its code re-usability and faster development however, what advantage we get on development results in slow hybrid apps. We can make the application relatively faster if we follow following points:

  • absolutely remove the comments and unnecessary functions
  • minimize the white-space, make your functions as small as possible
  • use minified css and js
  • optimize the images, the fewer the images the faster the application
  • if possible, preload the images check here
  • keep the nonessential js file to the bottom of the page just before the end of body tag
  • remove the unnecessary pages, unnecessary scrolling and large pages.
  • limit the usage of input boxes; make use of radio buttons,checkboxes and comboboxes if possible.
  • don’t use jquery library unless of utmost necessity, use javascript