How to guarantee the jQuery $ is initialized?

Question

In another question, StackOverflow suggested that it's impossible to guarantee the order in which a browser will process <script> tags, regardless of their position in the <head> or <body> (see comments):

Scripts loading out of order in Chrome

The top answer recommends using a pure-javascript "DOM-loaded" to guarantee that all dependencies are loaded, then running page-specific code.

This made me wonder whether it's safe to use jQuery's recommended $ function as a substitute for the pure-JS DOM-loaded:

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

Src: http://learn.jquery.com/using-jquery-core/document-ready/

How can I guarantee jQuery's $ will be defined?

EDIT: Examples of hypothetical failure were requested. Here's one with the external <script> in <body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example 1</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script>
    $(function(){
      alert("Loaded.");
    });
    </script>
  </body>
</html>

And one with the external <script> in <head>...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example 1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
  </head>
  <body>
    <script>
    $(function(){
      alert("Loaded.");
    });
    </script>
  </body>
</html>

Based on Scripts loading out of order in Chrome, either of these may fail.

Scripts are loaded in the order they are encountered, unless you've set defer or async, so it's not an issue. — adeneo, Apr 23 '15 at 17:19
http://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false this question is very similar to yours, and has very good answers — JuniorDev, Apr 23 '15 at 17:30
@adeneo That is apparently not correct. Please see "Scripts loading out of order in Chrome" http://stackoverflow.com/questions/29785887/scripts-loading-out-of-order-in-chrome — Colin, Apr 23 '15 at 17:50
@Colin - something else must be going on, billions of websites and users relies on the fact that scripts load in order every single day. — adeneo, Apr 23 '15 at 18:07
@adeneo Yea that's why I'm so confused about the other question. Perhaps it's a bug in Chrome? Or somehow StripeCheckout.js is signaling Chrome to continue despite the whole file not being processed? — Colin, Apr 23 '15 at 18:21
How would a browser react in the extreme case that jQuery is not in cache and downloaded extremely slowly, just fast enough to prevent a timeout? Would all browsers wait for the script to be loaded? Would the version of Chrome referenced in the linked question do that? — Eric J., Apr 23 '15 at 19:00
I'm voting to close this question as off-topic because you later state it is based on a faulty premise. — Eric J., Apr 23 '15 at 19:01

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

This question is based on a faulty premise. The referenced question, Scripts loading out of order in Chrome, was for an application using TurboLinks, which effectively turns a static site into a single-page app. As a result, my <script> tags were inserted dynamically, and there was not a guarantee they would be run in order.

edited May 23 '17 at 12:14

Community

1
1

answered Apr 23 '15 at 19:00

Colin

2,814
5
27
37

score 0 · Answer 2 · answered Apr 23 '15 at 20:00

You can repeatedly check if jQuery is loaded until it is, at which point you run some code.

<script>
function doStuff() {
   //do jQuery stuff
}

function checkLoaded() {
   if(typeof jQuery == 'undefined') {  
      setTimeout(function() {
         checkLoaded();
      }, 50);
   } else {
      doStuff();
   }
}

checkLoaded();
</script>

How to guarantee the jQuery $ is initialized?

2 Answers2

Linked