🔥 Get a free month of Premium Access. Use code: FREEAUG at checkout

The Best Way to Load jQuery Library (with fallback)

Sam Deering
Share

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