Wednesday, January 30, 2013

How to speed up jquery for mobile and phoneGap

Pre-req: You guys can use Setup Blog post for setup. First of all create a android project and add  PhoneGap stuff into it. Then inside asset/www/css & asset/www/js
copy the jquery mobile js and css file.

In this tutorial i am giving tips to speed up you native app



1) Put you script code at the end of </body> tag.

2) Integrate the jquery function with phoneGap function for example in my code app is consuming JSON from a PHP server. I used
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
        $.getJSON("http://aamirkhan9876.byethost7.com/mobMoviesServer/services/m/get_banners.php",function(jData){//code});
}
onDeviceReady(); is provided by phoneGap.

3) PhoneGap application takes time on startup. A black screen appears for few seconds. To avoide that use a splash screen.



  On DroidGap Activity. use
        super.setIntegerProperty("splashscreen", R.drawable.images);
        super.loadUrl("file:///android_asset/www/index.html", 10000);  
 It will show the splash screen instead of black screen for 10000 ms.
 For activity loads before this time use blow code in index.html
 function onDeviceReady() {
      cordova.exec(null, null, "SplashScreen", "hide", []);
}

 4) Avoid jquery mobile nvigation transition. If you can.
     $.mobile.defaultPageTransition="none"
5) Compress your js & css files. Use any Compressor. i.e I found yui compressor awesome.

Source code is available.