As a jQuery expert with over 8 years of experience, I’ve encountered countless situations where checking if jQuery is properly loaded becomes crucial for web application functionality.
Whether you’re debugging a broken website or implementing conditional loading, knowing how to verify jQuery’s presence is an essential skill every developer should master.
In this article, I will explain to you the methods to check if jQuery is loaded with easy methods and examples.
Check jQuery Load Status
Before getting into the methods, let’s understand why this check is important:
- Script Loading Conflicts: Multiple scripts may interfere with jQuery loading
- CDN Failures: External jQuery CDNs might be temporarily unavailable
- Performance Optimization: Avoid loading jQuery multiple times
- Debugging: Quickly identify if jQuery-related issues stem from loading problems
- Conditional Loading: Load jQuery only when needed
Method 1: Use the typeof Operator (Most Reliable)
The most robust way to check if jQuery is loaded is using JavaScript’s typeof operator:
if (typeof jQuery !== 'undefined') {
console.log('jQuery is loaded! Version: ' + jQuery.fn.jquery);
// Your jQuery code here
} else {
console.log('jQuery is not loaded');
// Load jQuery dynamically or show error
}I executed the above example code and added the screenshot below.
Alternative syntax using the $ symbol:
Check if jQuery’s `$` symbol is defined in the current page environment.
if (typeof $ !== 'undefined') {
console.log('jQuery ($) is available');
} else {
console.log('jQuery ($) is not available');
}Why This Method Works Best
- No Dependencies: Pure JavaScript, doesn’t require jQuery to be loaded
- Cross-Browser Compatible: Works in all modern and legacy browsers
- Reliable: Checks for actual object existence, not just script tags
Method 2: Use window.jQuery Property Check
This method checks if jQuery exists as a property of the global window object:
if (window.jQuery) {
console.log('jQuery is loaded via window object');
console.log('Version: ' + window.jQuery.fn.jquery);
} else {
console.log('jQuery not found in window object');
}I executed the above example code and added the screenshot below.
Method 3: Try-Catch Block Method
For scenarios where you want to handle potential errors gracefully:
try {
if (jQuery) {
console.log('jQuery is loaded successfully');
console.log('Version: ' + jQuery.fn.jquery);
}
} catch (error) {
console.log('jQuery is not loaded - Error: ' + error.message);
// Implement fallback or dynamic loading
}I executed the above example code and added the screenshot below.
Method 4: Check jQuery Version (Advanced)
Once you’ve confirmed jQuery is loaded, you might want to verify the version:
function checkjQueryVersion() {
if (typeof jQuery !== 'undefined') {
const version = jQuery.fn.jquery;
const majorVersion = parseInt(version.split('.')[0]);
console.log('jQuery version: ' + version);
if (majorVersion >= 3) {
console.log('Modern jQuery version detected');
} else if (majorVersion === 2) {
console.log('jQuery 2.x detected');
} else {
console.log('Legacy jQuery 1.x detected');
}
return version;
}
return null;
}I executed the above example code and added the screenshot below.
Dynamic jQuery Loading Implementation
When jQuery isn’t loaded, you can dynamically load it:
function loadjQuery(callback) {
if (typeof jQuery === 'undefined') {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.onload = function() {
console.log('jQuery loaded dynamically');
if (callback) callback();
};
script.onerror = function() {
console.error('Failed to load jQuery');
};
document.head.appendChild(script);
} else {
console.log('jQuery already loaded');
if (callback) callback();
}
}
// Usage
loadjQuery(function() {
// Your jQuery code here
$(document).ready(function() {
console.log('DOM ready with dynamically loaded jQuery');
});
});Complete Solution with Fallback Strategy
Here’s a comprehensive solution that combines all methods:
function ensurejQuery(callback) {
// Method 1: Check if jQuery is already loaded
if (typeof jQuery !== 'undefined') {
console.log('jQuery already loaded - Version: ' + jQuery.fn.jquery);
if (callback) callback();
return;
}
// Method 2: Dynamic loading with multiple CDN fallbacks
const cdnUrls = [
'https://code.jquery.com/jquery-3.6.0.min.js',
'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
];
let currentCdn = 0;
function loadNextCdn() {
if (currentCdn >= cdnUrls.length) {
console.error('All jQuery CDNs failed to load');
return;
}
const script = document.createElement('script');
script.src = cdnUrls[currentCdn];
script.type = 'text/javascript';
script.onload = function() {
console.log('jQuery loaded from CDN: ' + cdnUrls[currentCdn]);
if (callback) callback();
};
script.onerror = function() {
console.warn('Failed to load jQuery from: ' + cdnUrls[currentCdn]);
currentCdn++;
loadNextCdn();
};
document.head.appendChild(script);
}
loadNextCdn();
}
// Usage example
ensurejQuery(function() {
$(document).ready(function() {
console.log('jQuery is ready to use!');
// Your application code here
});
});Best Practices for jQuery Loading Checks
Let me explain to you the best practices for jQuery loading checks.
1. Timing Matters
Always check for jQuery after the DOM has loaded or use the methods within a document-ready function.
2. Use Strict Comparison
When possible, use typeof jQuery !== ‘undefined’ instead of just if (jQuery).
3. Handle Multiple jQuery Versions
If working with multiple libraries, use jQuery’s noConflict() mode:
if (typeof jQuery !== 'undefined') {
var $j = jQuery.noConflict();
// Use $j instead of $ to avoid conflicts
}4. Performance Considerations
Cache your jQuery checks to avoid repeated evaluations:
const jQueryLoaded = typeof jQuery !== 'undefined';
if (jQueryLoaded) {
// Proceed with jQuery code
}Common Issues to Avoid
- Script Order Dependencies: Ensure your check runs after jQuery script tags
- Async Loading Issues: Be careful with asynchronously loaded scripts
- Case Sensitivity: Remember that jquery and jQuery is different
- Namespace Conflicts: Other libraries might use the $ symbol
Checking if jQuery is loaded is a fundamental skill that every web developer should know.
The key is choosing the right method for your specific use case: use typeof jQuery !== ‘undefined’ for simple checks, implement dynamic loading for better user experience, and always have fallback strategies for production applications.
Remember, a robust jQuery loading check is not just about verifying presence; it’s about ensuring your web applications remain functional regardless of external dependencies or network conditions.
You may also read:
- Handle Dropdown Change Event in jQuery
- Execute Functions After Page Load Using jQuery
- Check Which Radio Button is Selected Using jQuery
- 51 jQuery Examples with Source Code
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
