CODEWITHSUNDEEP
androidperformancejquery-mobilemobilecordova
user1999257
user1999257

Reputation:

Using jQuery Mobile with phonegap

I am developing an android application using phonegap for android. As jQuery mobile provide us rich ui components. So I have choose to use jQuery mobile.

Now the problem is that when I am using jQuery mobile it is deceasing application performance. Means the loading time has been increased. So I just want to know how to use them properly so the application performance will not get affected.

Presently I am inserting like this.

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

Upvotes: 2

Views: 1618

Answers (4)

Sorin
Sorin

Reputation: 757

Beside packaging the jquery libraries with the app you could disable all animations to increase responsiveness, especially on Android devices (animations seems to work reasonable on iOS devices).

// Suppress all page transitions
$(document).bind('pageinit', function (){
    $.mobile.defaultPageTransition = 'none';
});

Upvotes: 0

Hazem Hagrass
Hazem Hagrass

Reputation: 9808

You can use backbone with jQuery mobile template which I integrated it and tested it on phonegap and it works like a charm

Upvotes: 0

justmyfreak
justmyfreak

Reputation: 1270

I suggest you to package jquery inside your asset/www just like Jason said. Then add : android:hardwareAccelerated="true" Inside tag in androidmanifest.xml like this :

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:hardwareAccelerated="true"
        android:theme="@style/AppTheme" >
        <activity

This will render your webview using GPU.

Dont forget to target latest or atleast ICS version for compiling. It can be done in first creation of your apps or edit your androidmanifest.xml : 

 <uses-sdk
        android:minSdkVersion="9"
        android:targetSdkVersion="16" />

This method proofed worked with my apps. :D

Upvotes: 2

Jason Sperske
Jason Sperske

Reputation: 30416

Well I would package the jquery libraries with the phoengap application. that way you won't be fetching the resources each time you launch the app from code.jquery.com. This would make your HTML look like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/scripts/jquery.mobile-1.2.0.min.css" />
<script src="/scripts/jquery-1.8.2.min.js"></script>
<script src="/scripts/jquery.mobile-1.2.0.min.js"></script>

Upvotes: 0

Related Questions