The relationship between Phonegap's "onBodyLoad()/onDeviceReady()" functions and Jquery's "$(document).ready()"

Question

I am using PhoneGap + jQuery Mobile in Android, I am confused about the Phonegap's "onBodyLoad()/onDeviceReady()" functions and Jquery's "$(document).ready()".

In PhoneGap documents:

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.

Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

In jQuery doc:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

My experiments shows that ready() is always earlier that onDeviceReady(), how to explain this? How should I use them? Should I put ready() in onDeviceReady() to make every call safe?

Thank you in advance.

Regards, Chris

Answer 1

$(document).ready will always fire first because it is triggered when all the DOM elements have loaded. Images, javascript functions, css, etc. may not have loaded by this time.

So PhoneGap has you put the onload method on the body's onLoad method so that it fires when that particular part of the DOM is ready. Once the DOM is prepared, you create an event listener to ensure that phonegap.js itself is ready (and not just the application UI, for example). Only after phonegap.js is loaded can you use the functions that it provides.

So yes, $(document).ready will fire first, but that does not mean that you can use phonegap.js (the 'api' calls). You cannot put $(document).ready inside of another function (as far as I know), since it is triggered by the DOM being loaded. You can (but should not) however call your onDeviceReady function from $(document).ready. The problem with this is that if the device is NOT in fact ready, the api calls will not be made.

So I would continue to use the body onLoad/onDeviceReady chain they have set up. Let me know if this needs more elaboration.