How to wait while Cordoba and jQuery load their libraries?

Question

jQuery has a ready-made function:

$(function() {...});

and in the documentation for cordova an event listener is added:

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

Do I need to call both of them to make sure both libraries are loaded before any code that refers to them is used?

Does it make sense to wet them, that is:

$(function(){
    onDeviceReady(){...}
}

Just trying to figure out how to do this, maybe I'm overdoing it.

Answer 1

JS files are downloaded sequentially. So in your HTML, just put your .js file after jQuery and cordova, and it won’t run before both are loaded.

<script src="jQuery"></script>
<script src="cordova"></script>
<script src="yourScript"></script> <!-- this won't run before both jQ and cordova are loaded -->

, , , :

var listener = {
    jquery: false,
    cordova: false,
    fire: function(e) {listener[e] = true; if (listener.jquery && listener.cordova) go();
};
document.addEventListener("deviceready", function(){listener.fire('cordova'), false();
$(document).ready(function(listener.fire('jquery')){});

function go() {
// your code here
}

, go() , , , , .

Answer 2

document.ready deviceready:

var onDeviceReady = function (){
    jQuery(document).ready(function (){
        // go!
    });
};

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

jQuery ready() DOMContentLoaded , .

jQuery (jQuery, $) , ; , .

Answer 3

jquery deviceready. , . , cordova/phonegap, . .

Open a blank document, add the html skeleton, then to the head of your html, add the following:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>//include the cordova.js file
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>//include the jquery.min.js file strictly after the cordova.js file
<script type="text/javascript" charset="utf-8">


    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {

        $(document).ready(function(){ //jquery starts here and is inside the device ready function


            //the next few lines are now the calling my plugins
            //#deviceproperties is a paragraph in html that has an id deviceproperties
            //#hideme is a span inside the paragaraph that has the id deviceproperties.inside the span is the statement that is saying 'loading device properties' and will be removed as soon as the script hide() runs

           $('#deviceProperties').prepend("<br>" + device.cordova 
                                 + "<br>" + device.platform
                                 + "<br>" + device.uuid
                                 + "<br>" + device.version
                                  );

            $('#hideme').hide();//hide the loading device properties
        });//lets end jquery`s document.ready

    }//lets end cordova`s device ready

</script>

Loading device properties ...