The Best Way to Load jQuery Library (with fallback)

Share this article

Here is what I think is the best and most reliable way to load jQuery library and jQuery UI Libraries. Nowadays everyone is using the Google CDN to load in the latest version of the jQuery library, this is leading to many browsers caching this file. If your web pages also do this it is very likely that the viewer already has this file cached and hence it will be one less file for them to load before getting to view your page.

On the off chance that the Google CDN is down (not likely) OR most likely you are working from a localhost for development there is a fall back to load a local version of jQuery Library.

Load jQuery Library

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('</script><script src="js/ext/jquery-1.7.2.min.js">< /script>')</script>

Load jQuery Library

<!-- Grab Google CDN's jQuery UI, with a protocol relative URL; fall back to local if offline -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('</script><script src="js/ext/jquery-ui.min.js">< /script>')</script>

Other Methods

Dynamically Load jQuery Library Using Plain JavaScript

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week