/ Published in: jQuery
Related Categories: jQuery, Tips
We've all heard the best practices recommendation to load jQuery (or other JavaScript libraries) from a CDN, such as Google's for performance reasons. But what happens if, in the rare chance, Google's network is down or inaccessible? At a minimum, your site would start throwing errors & wouldn't function properly.
Fear not, all is not lost. Using the code below, we can try to load the file from the Google CDN and then quickly test if it successfully loaded. If it did load properly, we don't do anything different. But if it didn't, we can load the file from another location, assumingly our web server. Then our site will function properly and once Google's CDN is re-accessible, visitors will continue to benefit from the use of the CDN.
We've all heard the best practices recommendation to load jQuery (or other JavaScript libraries) from a CDN, such as Google's for performance reasons. But what happens if, in the rare chance, Google's network is down or inaccessible? At a minimum, your site would start throwing errors & wouldn't function properly.
Fear not, all is not lost. Using the code below, we can try to load the file from the Google CDN and then quickly test if it successfully loaded. If it did load properly, we don't do anything different. But if it didn't, we can load the file from another location, assumingly our web server. Then our site will function properly and once Google's CDN is re-accessible, visitors will continue to benefit from the use of the CDN.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery === 'undefined') document.write("<scr"+"ipt src='jquery-1.3.2.min.js'></scr"+"ipt>"); </script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $('#test_id').append('test test test'); }) </script> </body> <span id="test_id"> </span> </html>