How to make sure $(document).ready run after jQuery.js is available?

Question

In some cases, because of download speed or other async issue, even I put $(document).ready() after including jquery.js, from time to time, I will get complains about $ is undefined. blah blah blah.

I don't want to do that:

setTimeout(function() {$(document).ready()... }, 1000);

that seems very lame.

so, is there a smart way or proper way or good way to ensure document.ready is really ready to be called? :)

are you including the jQuery in your page before calling this function? like 100% sure? ;-) — moe, Mar 22 '11 at 18:29
http://stackoverflow.com/questions/1116983/javascript-how-do-i-make-sure-a-jquery-is-loaded — , Mar 22 '11 at 18:30
it is before I call jquery function. however,it is not in because of other page requirements. it is included in the body before calling it. — murvinlai, Mar 22 '11 at 18:45
I would prefer to use $(window).on('load', function(){//your code here}. load event is triggered only when all assets are available, including jquery. — HieuHT, Aug 08 '16 at 09:25

RobertPitt · Answer 1 · 2011-03-22T20:52:25.333

I believe that is actually impossible, (the fact that $ would be undefined), the document head loads synchronously meaning each line is fully loaded before the next line

There is a video here where this exact test is put to the test and it seems I was correct

Video: http://www.bennadel.com/blog/1915-How-Javascript-Loading-And-Blocking-Works-By-Default.htm

are you loading the files correctly such as

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript">
            jQuery.ready(function(){
               //This is executed once all 4 above have been loaded
            });
        </script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <!-- The above to scripts are loaded in order after the jquery function has run. -->
    </head>
</html>

the ready method of jQuery only gets fired once the hole document has been loaded, until the DOM see's the final ending tag, usually </html> [citation needed]

having said that its impossible, it may be possible in IE8 or lower, the reason for this is because IE is possibly the worst browser ever made, but they have said that IE9 has totally had a overhaul and should content with the likes of Google, Apple, Mozilla etc

If your using multiple libraries or your overwriting the $ variable you can get it bac inside a locked scope like so:

(function($){
    $.ready(function(){
        //Do your jQuery here !
    });
})(jQuery)

Why the down vote, at least have the decency to explain what's incorrect ? — RobertPitt, Mar 22 '11 at 19:27

Hussein · Answer 2 · 2011-03-22T18:37:55.520

You can check if jQuery is loaded by doing.

if (typeof jQuery !== 'undefined') {
  //do whatever here
}

You do not have to do this. It is best to include all your JavaScript at the end of your HTML and before </body>, jQuery being first. This is the recommended method by yahoo. You can read more at http://developer.yahoo.com/performance/rules.html. This will not slow down your page load and will not give you issues with undefined jQuery.

score 2 · Accepted Answer · edited May 23 '17 at 12:01

Denis has provided a link with a good solution. I am using it now.

JavaScript - How do I make sure a jQuery is loaded?

See the answer and explanation in the link.

the solution is:

<script type='text/javascript'>
runScript();

function runScript() {
    // Script that does something and depends on jQuery being there.
    if( window.$ ) {
        // do your action that depends on jQuery.
    } else {
        // wait 50 milliseconds and try again.
        window.setTimeout( runScript, 50 );
    }
}
</script>

How to make sure $(document).ready run after jQuery.js is available?

3 Answers3