javascript - Need the document ready inside deviceready? - Stack Overflow

admin管理员组

文章数量:1291146

In phonegap do I need the $(document).ready(...) inside the deviceready event function? Can I be sure that document is loaded when the deviceready event is called?

Example:

document.addEventListener('deviceready', 
   function() {
            $(document).ready(function() { // is this too much? 
                initCampusWeb(); 
            });
        }, false);

In phonegap do I need the $(document).ready(...) inside the deviceready event function? Can I be sure that document is loaded when the deviceready event is called?

Example:

document.addEventListener('deviceready', 
   function() {
            $(document).ready(function() { // is this too much? 
                initCampusWeb(); 
            });
        }, false);

• javascript
• jquery
• cordova

Share Improve this question Follow asked Jan 18, 2015 at 16:18 OOPDeveloper89OOPDeveloper89 22755 silver badges1818 bronze badges 2

• You have to make sure document.ready is called before adding the event listener for deviceready, it can't happen the other way – Dawson Loudon Commented Jan 18, 2015 at 16:20
• See the answer here: stackoverflow./questions/13311805/… – Dawson Loudon Commented Jan 18, 2015 at 16:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The way that this works is jQuery(document).ready() fires first and then deviceready fires.

I generally set up my code like this:

jQuery(document).ready(function () {
    // do document ready stuff
}).on('deviceready', function () {
    // do deviceready stuff, put all calls to plugins in here
});

So the question as to where initCampusWeb goes depends on what you are doing inside that function. If it uses plugins, put it inside the deviceready handler.

I wasn't confident that deviceready would always fire after document ready, so I took the following asynchronous approach, like so:

bindEvents: function () {
    var me = this;

    document.addEventListener('deviceready', function () {
        me.onDeviceReady();
    }, false);

    $(document).ready(function () {
        me.onDocumentReady();
    });
},

documentReady: false,
onDocumentReady: function () {
    this.documentReady = true;
    this.checkReady();
},

deviceReady: false,
onDeviceReady: function () {
    this.deviceReady = true;
    this.checkReady();
},

checkReady: function (id) {
    if (this.documentReady && this.deviceReady) this.load();
},

load: function () {
    // do stuff
}

This way you don't risk attaching handlers after the event has occurred. May be overkill, but gives me plete confidence and also asynchronous extensibility (in case I want load() to wait for another event to plete).

According to the cordova documentation:

Cordova consists of two code bases: native and JavaScript. While the native code loads, a custom loading image displays. However, JavaScript only loads once the DOM loads. This means the web app may potentially call a Cordova JavaScript function before the corresponding native code bees available.

The deviceready event fires once Cordova has fully loaded. Once the event fires, you can safely make calls to Cordova APIs. Applications typically attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

The deviceready event behaves somewhat differently from others. Any event handler registered after the deviceready event fires has its callback function called immediately.

The $(document).on("ready") will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

you can use only document.addEventListener('deviceready') for that prupouse

That is the right way:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

   // Your code here

}

本文标签： javascriptNeed the document ready inside devicereadyStack Overflow