Take the 2-minute tour ×

I am making a phonegap application with jquery. I am confused whether I should wrap my entire code inside JQuery's $(document).ready like


or inside the deviceready event of phonegap like

document.addEventListener("deviceready", function(){

I am currently using document.ready but I think I may encounter problems if I try to access some Phonegap API methods inside document.ready.

Which is the best event to wrap my code in, document.ready or deviceready?

share|improve this question
add comment

2 Answers

up vote 8 down vote accepted

You should use the deviceready event to avoid funny things happening.

The docs state: This is a very important event that every PhoneGap application should use.

PhoneGap consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a PhoneGap JavaScript function before it is loaded.

The PhoneGap deviceready event fires once PhoneGap has fully loaded. After the device has fired, you can safely make calls to PhoneGap function.


Read the documentation here:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

share|improve this answer
add comment

A key point in the answer is this line from the documentation of the deviceready event.


What this means is that you won't 'miss' the event if you add a listener after the event has been fired.

So, first move all the initialization code to the onDeviceReady function. Then first handle the document.ready. Within the document.ready if you determine that you are running in a browser, just call the onDeviceReady function, otherwise add the deviceready listener. This way when you are in the onDeviceReady function you are sure that all the needed 'ready's have happened.

$(document).ready(function() {
    // are we running in native app or in a browser?
    window.isphone = false;
    if(document.URL.indexOf("http://") === -1 
        && document.URL.indexOf("https://") === -1) {
        window.isphone = true;

    if( window.isphone ) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {

function onDeviceReady() {
    // do everything here.

The isphone check works because in phonegap, the index.html is loaded using a file:/// url.

share|improve this answer
I like this solution as well. In my build I add a test for localhost if(document.URL.indexOf("http://") == -1 && document.URL.indexOf("localhost") != 7) so I can open index.html locally from the file system if I want to. –  genkilabs Jul 9 '13 at 21:16
If your app could run in browser with https you should also check for "https" protocol so the "if" should be: if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) –  bluesm Sep 17 '13 at 10:00
@bluesm done. thanks. –  Kinjal Dixit Sep 18 '13 at 5:12
This answer helped me a lot. –  MurifoX Jan 13 at 22:00
add comment

Your Answer


