I've got a project using PhoneGap 1.0 and jQuery Mobile running on Android.
I'd like to achieve 2 outcomes:
When the app is loading and fetching data from the server, to put a splash screen. I've managed to put a splash screen for a defined time - but without really waiting for the data being loaded.
When the user hits the "refresh" button and the app tries to fetch data from the server - to put some "loading" screen. I wasn't able to achieve this. I've tried (http://nachbaur.com/blog/telling-your-user-that-a-phonegap-application-is-busy) but without success. I suspect it's only good for iOS.
Help would be much appreciated.
Thanks!
Try using the jQuery blockUI plugin?
http://jquery.malsup.com/block/
If you need a 'activity indicator' along with the UI block, try this:
HTML5 Canvas: How to make a loading spinner by rotating the image in degrees?
(since sadly, a simple animated GIF won't work...)
I am using jQuery BlockUI, with a simple spinner.gif image , works good on iOS, but on android the spinner freezes for some time in between. But it works! I think it is important to use less processor speed as possible .
Related
I would like to use the splash screen used on beginning as body background in every page.
Is there a system to know what is the image path is used by device? ... I have a lot of images for many type of devices and brand.
I have searched on web but no one answer and no one solution... am I alone?!
Thanks
iOS has added support for a single splash screen for every device. If you did this then you could just use that one
I'm not sure about android though.
I have an app running on AngularJS and Ionic and I have a problem with state transition with Android devices but not on iPhone/iOS.
One page is quite large and when I navigate from the home screen to this page the header gets loaded first and after 2-3 seconds the actual view changes.
I tried adding ng-cloak to the ion-view but this doesn't solve the problem.
What do you mean by that your view is getting changed? Also in which versions of Android are you facing this problem?
Unfortunately it seems a problem very device oriented. You could try to change some elements to enhance perfomance like changing your ng-repeat for collection-repeat.
The best way you could try to improve your performance in Android comes to the cost of weight in your App. You could try using Crosswalk Webview Plugin. This not only provides you the great webview capabilities where your native webview lacks the performance but also it is providing feature constancy across Android 4.0+ Platforms.
See this:
http://blog.ionic.io/crosswalk-comes-to-ionic/
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
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?
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');
});
I found some solutions by which I face problem in ionic app transitiosn..
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();
});
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
i am new to phonegap i want to know how can i improve performance of my app created using phonegap. Key issue is when the app starts up it is very slow on emulator as well as on device. When the app starts it first shows native android activity UI then the webview is invoked. Why this transition is happening and how i can hide from user.
Sounds like you are talking about splashscreen.
Im going to give you a lot of general answers, hope that some of them can help you.
You can extend the "splashscreen" life time by using the config.xml file, check this:
https://build.phonegap.com/docs/config-xml#android-prefs
Simon made a post about Android Splash Screens:
http://simonmacdonald.blogspot.dk/2012/04/phonegap-android-splashscreen-just-got.html
Or read some here:
Black screen for Android app
I have a working app built in jQuery Mobile and Phonegap (using Eclipse on Mac OSX)
Everything is working OK, except when the Ajax loading message pops up, the animated gif does not animate, it simply stick on the first frame.
Viewing the app in a web browser (as it is basically a mobile site) the gif animates no problem.
I have read that showing animated gifs on Android is tricky without using the web browser. Is there a way to get it to work? Maybe replace it with something in CSS3?
Although the comments explain why it doesn't work, this might get you started on finding a workable replacement: https://stackoverflow.com/a/2767556/878602