Checking whether jQuery is loaded using JavaScript

javascript

javascript-detection

error-handling

promises

byNikita Barsukov·Feb 1, 2025

If you're in a hurry, here's the fastest way to check if jQuery is loaded:

window.jQuery ? console.log('jQuery is inside the building') : console.log('jQuery is still stuck in traffic');

For a deep check, consider script timing. Use window.onload event to check after all scripts get enough time to load:

window.onload = function() {
  if (window.jQuery) {
    console.log('jQuery reports: mission accomplished!');
  } else {
    console.log('Quartermaster reports: no sign of jQuery yet');
  }
};

Our out-of-the-box inspection techniques help you avoid the false positives due to early gate-crashing checks running before jQuery loads.

Comprehensive guide on jQuery detection

Proceeding beyond the quick refresher, let's dive into detecting jQuery under various situations, handle troublesome scenarios, and understand the tactics of error handling.

Scenario 1: jQuery has left the party

Check if jQuery is AWOL with:

if (typeof jQuery === 'undefined') {
  console.error('Code to Base: jQuery has gone rogue, Proceed with plan B.');
  // Dynamically load jQuery or fallback plan
}

Scenario 2: jQuery is at the party, but isn't dancing

Even if jQuery is present, ensure it's doing its thing and isn't just sipping a drink in the corner:

if (typeof jQuery === 'function' && $ === jQuery) {
  console.log('jQuery has entered the dance floor!');
} else {
  console.log('Houston, we have a problem with jQuery.');
}

Scenario 3: Clash of the Titans

In cases where other JavaScript libraries try to overshadow jQuery, your mission, should you choose to accept it, is to ensure jQuery comes out on top:

if ($ === jQuery) {
  console.log('$ and jQuery are same-same but different.');
} else {
  console.warn('Red Alert: $ and jQuery have a love-hate relationship.');
}

Extras: The Secret Tricks

The Script Source

Ensure your script tag hasn't invited the wrong jQuery to the party:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Use your browser's developer tools, it's like having X-ray vision.

The Asynchronous Conundrum

If jQuery is falling behind because it's taking the scenic route, try using promises or Event Listeners:

document.addEventListener('jQueryLoaded', function() {
  console.log('jQuery has entered the building.');
});
// Trigger this event post jQuery's grand entrance