Loading jQuery With Two Fallbacks

3 comments

1. I use a similar pattern to enqueue jQuery from the Google CDN (as the CSS Tricks example). However in my footer (typically footer.php) I’ll usually hard code the following fallback.

   <script type="text/javascript">
       if (typeof jQuery === 'undefined') {
           document.write('<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>');
       }
   </script>
   

   Let me explain what this does and why I use it…

   After jQuery is deregistered, registered, and enequeued, it’ll be injected into the DOM at render time. The script example will need to be included after WordPress renderes wp_header or wp_footer (however you’ve queued it).

   The script will check if jQuery is actually an object (if not, it’ll be undefined because of a 404 error or whatever). Then it’ll write out a script tag to load your own copy of jQuery from your theme.

   What if the first CDN load fails? Doesn’t that mean WordPress will think jQuery didn’t load? No. WordPress won’t have any knowledge of the CDN failing, but it’ll still think some sort of external resource is being registered and enqueued (as jQuery) and you still gain the benefits of playing nice with other plugins that request jQuery.

   I’ve not tried to create a method of attempting a load from Google’s CDN and then Microsoft’s CDN and then my own, however. I’d have to think further on a good way to asynchronously attempt that.

   Log in to Reply

2. To expand on what Jared Cobb wrote into a hook and a more simple check.

   function inline_78740_jquery(){ ?>
   
   <script type="text/javascript">
   !window.jQuery && document.write('<script src="/wp-includes/js/jquery/jquery.js"></script>')
   </script>
   
   <?php }
   add_action('wp_footer', 'inline_78740_jquery', 1);
   

   There are real problems with this, if any plugins hook into wp_enqueue_script they might still break, especially is they are using $deps.

   ps. I removed the Php for the src since you can use your theme dir or the wp-includes function includes_url, for example.

   Honestly the small footprint loading Jquery locally provides is often a better solution to using a CDN, that way you don’t have to worry about fallback or outdated CDN’s.

   Support local loading!

   Log in to Reply

3. As far as I can tell there is no fall back within their functions.php, what that functions.php is doing is telling JQUERY not to be loaded locally and load it via the CDN ensuring that no plugins can HOOK it in for a 2nd time.

   If your looking for similar code but with a fall back here you go:

   if( !is_admin()){ // Disabled for Admin Area to Avoid Conflicts
   $url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'; // the URL to check against
   $test_url = @fopen($url,'r'); // Requires FOPEN
   if($test_url !== false) { // Tests to see if URL Exists
   function load_external_jQuery() { // Loads the remote file
   wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery
   wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); // register the external file
   wp_enqueue_script('jquery'); // enqueue the remote file
   }
   add_action('wp_enqueue_scripts', 'load_external_jQuery'); // initiate the function
   } else {
   function load_local_jQuery() {
   wp_deregister_script('jquery'); // deregisters the default WordPress jQuery
   wp_register_script('jquery', get_bloginfo('template_url').'/js/jquery-1.7.1.min.js', __FILE__, false, '1.6.2', true); // register the local file
   wp_enqueue_script('jquery'); // enqueue the local file
   }
   add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function
   }
   }
   

   Log in to Reply