Test if jquery is loaded not using the document ready event

Question

On my site I have a jquery function which retrieves data from another (secured) server as soon as the page is loaded. Using a jsonp call I currently load this data after document ready event:

<script type="text/javascript">
    $(document).ready(function () {
       $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
            initPage(data);
        });
    });
</script>

What I don't like about the above call, is that the jsonp can actually be exectued before the document ready event, thereby slowing down the page load. So if I include jquery inside the page (i.e. not referencing using the script tag), then the following code works great and the page loads faster:

<script type="text/javascript">
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        $(document).ready(function () {
            initPage(data);
        });
    });
</script>

But including jquery in every page is a 23k overhead which I'd like to avoid. How can I test to see if jquery has been loaded and only the excecute the initPage() function when jquery has been loaded?

Edit: To be more precise I need check repeatedly if jquery is loaded and then exectue the event. A timer job could be the solution..

Solution: I've created a preinit which does the jquery check. My page loading couldn't be faster:). Thanks everyone!

   function preInit() 
   {
       // wait until jquery is loeaded
       if (!(typeof jQuery === 'function')) {
           window.setTimeout(function () {
               //console.log(count++);
               preInit();
           }, 10);  // Try again every 10 ms..
           return;
       }
           $.getJSON(_secureHost + '/base/members/current.aspx?callback=?',
            function (data) {
                $(document).ready(function () {
                    initPage(data);
                });
            });
       }

Answer 1

I think you could just use

if (jQuery) {
   ...
}

to see if the jQuery object exists.

Ok, better would be:

if (typeof jQuery !== 'undefined') {
   ...
}

or

if (typeof jQuery === 'function') {
   ...
}

EDIT:

Don't worry about the overhead or whether the jQuery object is loaded. If you just include the jQuery library using a regular <script src="..."> tag and then execute your code without the $(document).ready, like this:

<script type="text/javascript">
   $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        initPage(data);
    });
</script>

It will work. The $(document).ready part is only to ensure the DOM has fully loaded before you go around trying to change DOM elements that aren't loaded yet. The jQuery library itself, including the Ajax functionality, will be there right away.

Now, if your initPage(data) call uses the DOM, which I assume it does, you could put a check in that, like this:

<script type="text/javascript">
    function initPage(data) {
        var $domObject = $('#your-dom-object');
        if ($domObject.length === 0) { // Dom object not loaded yet.
            window.setTimeout(function() {
                initPage(data);
            }, 0); // Try again after other stuff has finished.
            return;
        }
        // Do your regular stuff here.
    }
</script>

However, I don't think this would be necessary in most situations.

Answer 2

As long as you place the script tag that includes jQuery above your script tag that runs your function then it should work fine.

Wrapping your script in this instead of the ready function may help:

(function() {
    // Your code here
})();