Geek Answers Handbook

Check if jquery is loaded without using the document ready event

On my site, I have a jquery function that retrieves data from another (secure) server as soon as the page loads. Using a jsonp call, I am currently loading this data after a 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 jsonp can actually be output before the document ready event, thereby slowing down the page loading. Therefore, if I enable jquery inside the page (i.e. without referring to the use of the script tag), then the following code works fine, 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 on every page is 23k overhead that I would like to avoid. How can I check if jquery is loaded, and only the excecute initPage () function when loading jquery?

Edit: To be more precise, I need to check several times if jquery is loaded, and then output the event. A timer task may be a solution.

Solution: I created a preinit that performs jquery validation. My page loading could not be faster :). Thanks to all!

  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); }); }); }
+7
source share
6 answers

I think you could just use

 if (jQuery) { ... }

to see if jQuery object exists.

Ok, it would be better:

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

or

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

EDIT:

Do not worry about overhead or download the jQuery object. If you just turn on the jQuery library using the regular <script src="..."> and then execute your code without $(document).ready , for example:

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

That will work. The $(document).ready intended only to ensure that the DOM is fully loaded before you start trying to modify DOM elements that are not yet loaded. The jQuery library itself, including Ajax functionality, will be right away.

Now, if your initPage(data) call uses the DOM, which I assume it does, you can put a check, for example:

 <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 do not think that this would be necessary in most situations.

+5
source

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

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

 (function() { // Your code here })();
+1
source

You can add a full load function or a full grid function, as shown below, which will help you perform some operation on jqgrid

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

Hi, I think you should first check that the jquery and the method you are going to use are defined or not

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

0
source

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

Are you sure about that ?! note that you still have image loading. I think you need to use:

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

Link

0
source

I used the smooth jQuery plugin. This worked for me:

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

jquery version - 1.9.1 nightly version - 0.5

0
source

More articles:


All Articles