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);
                });
            });
       }

Spiny Norman · Accepted Answer · 2011-01-07T09:53:03.640

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.

thats nearly it. but I don't know how long it would take to actually load jquery. I'd have to repeat that check until jquery is loaded. I could create a time which checks every 10ms or so.. But that doesn't feel good.. — AyKarsi, Jan 07 '11 at 09:22
Ah, is that what you mean? I thought you meant you wanted to test if jQuery was loaded at all. In that case, I'm pretty sure that jquery has finished loading by the time you exit the ` — Spiny Norman, Jan 07 '11 at 09:28
Here you go. I think this is more what you want to do, although I still think yagni. — Spiny Norman, Jan 07 '11 at 09:44

score 1 · Answer 2 · answered Jan 07 '11 at 09:16

1

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
})();

answered Jan 07 '11 at 09:16

Olical

39,703
12
54
77

This is just the same as the $(document).ready(function(){}). Just a shorthand version. – Matt Asbury Jan 07 '11 at 09:23
I use it to run functions as the document loads without jQuery included. I did not know that jQuery changes the functionality of this? – Olical Jan 07 '11 at 09:27
@Matt That would be `$(function() {...});` :) @Wolfy87 This is a nice way of encapsulating the code, but it doesn't change much. Then again, I don't think our poster needs a whole lot of change. – Spiny Norman Jan 07 '11 at 09:32
I think Matt is mistaken it for $(function() { //code }); which is the jQuery shorthand for document.ready – Sondre Jan 07 '11 at 09:32
@Spiny Norman Good point, I think it would just work on its own, I am not sure that it needs /any/ encapsulation. – Olical Jan 07 '11 at 09:33
Oops. Apologies. Should look more closely next time. +1 – Matt Asbury Jan 07 '11 at 09:34

score 0 · Answer 3 · answered Jan 20 '14 at 14:23

0

I was using footable jquery plugin. This worked for me :

if ( $.fn.footable) 
{...}

jquery version - 1.9.1 footable version - 0.5

answered Jan 20 '14 at 14:23

Binita Bharati

5,239
1
43
24

score 0 · Answer 4 · answered Jan 07 '11 at 09:21

0

You can add either load complete function or grid complete function like shown below which will help you to do some operation on jqgrid

 height : '550',
    width : '787',
    loadComplete : function() {}
    gridComplete:function(){}

answered Jan 07 '11 at 09:21

RPB

16,006
16
55
79

score 0 · Answer 5 · answered Jan 07 '11 at 09:26

0

hi I think You should first check that is jquery and the method you are going to use is defined or not

if(typeof(jQuery)!='undefined' && typeof($.ajax)!='undefined' ){
// your code will come here
}

answered Jan 07 '11 at 09:26

Hafiz

4,187
12
58
111

score 0 · Answer 6 · edited May 23 '17 at 12:31

0

What I don't like about the above call, is that the jsonp can actually be exectued before the document ready event

are you sure about that?! please note you may still have images loading..etc
I guess you need to use:

$(window).load(function() {
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        initPage(data);
    });
});

Link

edited May 23 '17 at 12:31

Community

1
1

answered Jan 07 '11 at 09:27

ifaour

38,035
12
72
79

I actualy want to execute the jsonp as early as possible. document ready means, the dom is ready for manipulation. as long as I respect the document ready before I start manipulating, I'm good. – AyKarsi Jan 08 '11 at 10:19

Test if jquery is loaded not using the document ready event

6 Answers6

Linked