Best way to use Google s hosted jQuery but fall back to my hosted library on Google fail

Question

What would be a good way to attempt to load the hosted jQuery at Google  or other Google hosted libs   but load my copy of jQuery if the Google attempt fails   I m not saying Google is flaky  There are cases where the Google copy is blocked  apparently in Iran  for instance    Would I set up a timer and check for the jQuery object   What would be the danger of both copies coming through   Not really looking for answers like  just use the Google one  or  just use your own   I understand those arguments  I also understand that the user is likely to have the Google version cached  I m thinking about fallbacks for the cloud in general     Edit  This part added     Since Google suggests using google load to load the ajax libraries  and it performs a callback when done  I m wondering if that s the key to serializing this problem   I know it sounds a bit crazy  I m just trying to figure out if it can be done in a reliable way or not     Update  jQuery now hosted on Microsoft s CDN   http   www asp net ajax cdn

User · Answer

You might want to use your local file as a last resort.

Seems as of now jQuery's own CDN does not support https. If it did you then might want to load from there first.

So here's the sequence: Google CDN => Microsoft CDN => Your local copy.

<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script>

User · Answer

You can use code like    lt script type  text javascript  src  http   code jquery com jquery-latest min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script type  text javascript  src    scripts jquery min js  gt  x3C script gt    lt  script gt    But also there are libraries you can use to setup several possible fallbacks for your scripts and optimize the loading process    basket js RequireJS yepnope   Examples   basket js I think the best variant for now  Will cach your script in the localStorage  that will speed up next loadings  The simplest call   basket require   url    path to jquery js        This will return a promise and you can do next call on error  or load dependencies on success   basket      require   url    path to jquery js          then function                 Success        function  error               There was an error fetching the script            Try to load jquery from the next cdn           RequireJS  requirejs config       enforceDefine  true      paths            jquery                   ajax aspnetcdn com ajax jquery jquery-2 0 0 min                 If the CDN location fails  load from this location              js jquery-2 0 0 min                         Later require   jquery    function             yepnope  yepnope      load   http   ajax aspnetcdn com ajax jquery jquery-2 0 0 min js     complete  function          if   window jQuery          yepnope  js jquery-2 0 0 min js

User · Answer

UPDATE  This answer turned out to be wrong  Please see the comments for the real explanation     Most of you question has been answered  but as for the final part      What would be the danger of both copies coming through    None really   You d waste bandwidth  might add some milliseconds downloading a second useless copy  but there s not actual harm if they both come through   You should  of course  avoid this using the techniques mentioned above

User · Answer

For those people using ASP NET MVC 5  add this code in your BundleConfig cs to enable the CDN for jquery   bundles UseCdn   true  Bundle jqueryBundle   new ScriptBundle    bundles jquery      ajax googleapis com ajax libs jquery 2 1 1 jquery min js   Include    Scripts jquery- version  js    jqueryBundle CdnFallbackExpression    window jQuery   bundles Add jqueryBundle

User · Answer

if  typeof jQuery     undefined        or if     window jQuery     or if      jQuery  in window     or if     window hasOwnProperty  jQuery           var script   document createElement  script      script type    text javascript     script src     libs jquery js      var scriptHook   document getElementsByTagName  script   0     scriptHook parentNode insertBefore script  scriptHook        After you attempt to include Google s copy from the CDN   In HTML5  you don t need to set the type attribute   You can also use     window jQuery    document write   lt script src   libs jquery js  gt  lt   script gt

User · Answer

Step 1  Did jQuery fail to load   check jQuery variable    How to check a not-defined variable in JavaScript   Step 2  Dynamically import  the backup  javascript file   How do I include a JavaScript file in another JavaScript file

User · Answer

The inability to load the resource from an external data store beyond your control is difficult   Looking for missing functions is totally fallacious as a means to avoid suffering a timeout  as described herein  http   www tech-101 com support topic 4499-issues-using-a-cdn

User · Answer

You can achieve it like this    lt script src  https   ajax googleapis com ajax libs jquery 1 2 6 jquery min js  gt  lt  script gt    lt script gt         window jQuery    document write   lt script src   path to your jquery  gt  lt   script gt      lt  script gt    This should be in your page s  lt head gt  and any jQuery ready event handlers should be in the  lt body gt  to avoid errors  although it s not fool-proof     One more reason to not use Google-hosted jQuery is that in some countries  Google s domain name is banned

User · Answer

Google Hosted jQuery   If you care about older browsers  primarily versions of IE prior to IE9  this is the most widely compatible jQuery version    lt script src    ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt    If you don   t care about oldIE  this one is smaller and faster     lt script src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt   Backup Fallback Plan    Either way  you should use a fallback to local just in case the Google CDN fails  unlikely  or is blocked in a location that your users access your site from  slightly more likely   like Iran or sometimes China     lt script src    ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt   lt script gt if   window jQuery    document write   lt script src   path to your jquery  gt  lt   script gt        lt  script gt    Reference  http   websitespeedoptimizations com ContentDeliveryNetworkPost aspx

User · Answer

Using Razor syntax in ASP NET  this code provides fallback support and works with a virtual root     var jQueryPath   Url Content    Scripts jquery-1 7 1 min js      lt script type  text javascript  gt      if  typeof jQuery     undefined           document write unescape   3Cscript src   jQueryPath  type  text javascript  3E 3C script 3E      lt  script gt    Or make a helper  helper overview     helper CdnScript string script  string cdnPath  string test         Html Raw   lt script src   http   ajax aspnetcdn com     cdnPath         script       type   text javascript   gt  lt  script gt               lt script type   text javascript   gt     test        document write unescape    3Cscript src      Url Content    Scripts     script       type  text javascript  3E 3C script 3E      lt  script gt        and use it like this    CdnScript  jquery-1 7 1 min js    ajax jQuery    window jQuery    CdnScript  jquery validate min js    ajax jquery validate 1 9    jQuery fn validate

User · Answer

Yet another fallback that replaces ajax googleapis com with cdnjs cloudflare com    function  doc            use strict        if  typeof        undefined                 var script   doc querySelector  script src   jquery min js                  src   script src replace  ajax googleapis com    cdnjs cloudflare com             script parentNode removeChild script           doc write   lt script src      src      gt  lt  script gt              document  window jQuery    window Zepto      You can stick to a jQuery version by specifying it in the string Perfect for Asset Management that doesn t work with HTML snips Tested in the wild - works perfect for users from China

User · Answer

if  typeof jQuery     undefined            Or  if  window jQuery     Will not works if cdn version not loaded  because browser will run through this condition and during it still downloading the rest of javascripts which needs jQuery and it returns error  Solution was to load scripts through that condition        lt script src  http   WRONGPATH code jquery com jquery-1 4 2 min js  type  text javascript  gt  lt  script gt  lt  --  WRONGPATH for test-- gt     lt script type  text javascript  gt    function loadCDN or local        if  window jQuery    jQuery not loaded  take a local copy of jQuery and then my scripts       var scripts   local copy jquery js   my javascripts js          for var i 0 i lt scripts length i           scri document getElementsByTagName  head   0  appendChild document createElement  script           scri type  text javascript         scri src scripts i               else    jQuery loaded can load my scripts     var s document getElementsByTagName  head   0  appendChild document createElement  script         s type  text javascript       s src  my javascripts js             window onload function   loadCDN or local         lt  script gt

User · Answer

I consider that should escape the last  lt  to  x3C in string  When the browser sees   it considers this to be the end of the script block  since the HTML parser has no idea about JavaScript  it can t distinguish between something that just appears in a string  and something that s actually meant to end the script element   So  appearing literally in JavaScript that s inside an HTML page will  in the best case  cause errors  and  in the worst case  be a huge security hole    lt script src  https   ajax aspnetcdn com ajax jquery jquery-2 0 0 min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script src  js jquery-2 0 0 min js  gt  x3C script gt    lt  script gt

User · Answer

I made a Gist that should dynamically load jQuery if it isn t already loaded  and if the source fails  it proceeds onto fallbacks  stitched together from many answers   https   gist github com tigerhawkvok 9673154   Please note I plan to keep the Gist updated but not this answer  for what it s worth      See https   gist github com tigerhawkvok 9673154 for the latest version    function cascadeJQLoad i       Use alternate CDNs where appropriate to load jQuery     if  typeof i      number   i   0         the actual paths to your jQuery CDNs     var jq paths              ajax googleapis com ajax libs jquery 2 1 0 jquery min js            ajax aspnetcdn com ajax jQuery jquery-2 1 0 min js                Paths to your libraries that require jQuery     var dependent libraries              js c js             if  window jQuery     undefined  amp  amp  i  lt  jq paths length            i            loadJQ jq paths i   i  dependent libraries             if  window jQuery     undefined  amp  amp  i    jq paths length               jQuery failed to load            Insert your handler here                  You shouldn t have to modify anything below here        function loadJQ jq path  i  libs      load jQuery if it isn t already     if  typeof jq path      undefined   return false      if  typeof i      number   i   1      var loadNextJQ   function             var src    https      location protocol    https     http           var script url   src           jq path          loadJS script url  function                 if  window jQuery     undefined  cascadeJQLoad i                         window onload   function             if  window jQuery     undefined  loadNextJQ            else                  Load libraries that rely on jQuery             if  typeof libs      object                       each libs  function                         loadJS this toString                                                           if  i  gt  0  loadNextJQ       function loadJS src  callback        var s   document createElement  script        s src   src      s async   true      s onreadystatechange   s onload   function             var state   s readyState          try               if   callback done  amp  amp    state     loaded complete  test state                      callback done   true                  callback                            catch  e                   do nothing  no callback function passed                      s onerror   function             try               if   callback done                    callback done   true                  callback                            catch  e                   do nothing  no callback function passed                     document getElementsByTagName  head   0  appendChild s            The part that actually calls above      if  window readyState      older microsoft browsers     window onreadystatechange   function             if  this readyState     complete     this readyState     loaded                 cascadeJQLoad                      else     modern browsers     cascadeJQLoad

User · Answer

Because of the Google s banning problem I prefer to use Microsoft s cdn http   www asp net ajaxlibrary cdn ashx

User · Answer

Conditionally load latest legacy jQuery version and fallback    lt  -- if lt IE 9  gt       lt script src    ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt       lt script gt window jQuery    document write   lt script src   public vendor jquery-legacy dist jquery min js  gt  x3C script gt    lt  script gt   lt   endif -- gt   lt  -- if gte IE 9  gt  lt  -- gt       lt script src    ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt       lt script gt window jQuery    document write   lt script src   public vendor jquery dist jquery min js  gt  x3C script gt    lt  script gt   lt  -- lt   endif -- gt

User · Answer

Here is a great explaination on this   Also implements loading delays and timeouts   http   happyworm com blog 2010 01 28 a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line

User · Answer

Although writing document write   lt script gt  lt  script gt    seems easier for jQuery backoff  Chrome gives validation error on that case  So I prefer breaking  script  word  So it becomes safer like above    lt script src  http   ajax aspnetcdn com ajax jQuery jquery-1 11 1 min js  gt  lt  script gt   lt script gt if  typeof jQuery      undefined        window jqFallback   true     document write   lt scr   ipt src  http   cdnjs cloudflare com ajax libs jquery 1 11 1 jquery min js  gt  lt  scr   ipt gt        lt  script gt    For long term issues  it would be better to log JQuery fallbacks  In the code above  if first CDN is not available JQuery is loaded from another CDN  But you could want to know that erroneous CDN and remove it permanently   this case is very exceptional case  Also it is better to log fallback issues  So you can send erroneous cases with AJAX  Because of JQuery isn t defined  you should use vanilla javascript for AJAX request    lt script type  text javascript  gt      if  typeof jQuery      undefined     window jqFallback    true               XMLHttpRequest for IE7   Firefox  Chrome  Opera  Safari            ActiveXObject for IE6  IE5         var xmlhttp   window XMLHttpRequest   new XMLHttpRequest     new ActiveXObject  Microsoft XMLHTTP            var url   window jqFallback    true     yourUrl       yourUrl2            xmlhttp open  POST   url  true           xmlhttp send           lt  script gt

User · Answer

Almost all public CDNs are pretty reliably  However  if you are worried about blocked google domain  then you can simply fallback to an alternative jQuery CDN  However  in such a case  you may prefer to do it opposite way and use some other CDN as your preferred option and fallback to Google CDN to avoid failed requests and waiting time    lt script src  https   pagecdn io lib jquery 3 2 1 jquery min js  gt  lt  script gt   lt script gt     window jQuery    document write   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt   script gt      lt  script gt

User · Answer

There are some great solutions here  but I ll like to take it one step further regarding the local file   In a scenario when Google does fail  it should load a local source but maybe a physical file on the server isn t necessarily the best option  I bring this up because I m currently implementing the same solution  only I want to fall back to a local file that gets generated by a data source   My reasons for this is that I want to have some piece of mind when it comes to keeping track of what I load from Google vs  what I have on the local server  If I want to change versions  I ll want to keep my local copy synced with what I m trying to load from Google  In an environment where there are many developers  I think the best approach would be to automate this process so that all one would have to do is change a version number in a configuration file   Here s my proposed solution that should work in theory    In an application configuration file  I ll store 3 things  absolute URL for the library  the URL for the JavaScript API  and the version number Write a class which gets the file contents of the library itself  gets the URL from app config   stores it in my datasource with the name and version number Write a handler which pulls my local file out of the db and caches the file until the version number changes  If it does change  in my app config   my class will pull the file contents based on the version number  save it as a new record in my datasource  then the handler will kick in and serve up the new version    In theory  if my code is written properly  all I would need to do is change the version number in my app config then viola  You have a fallback solution which is automated  and you don t have to maintain physical files on your server   What does everyone think  Maybe this is overkill  but it could be an elegant method of maintaining your AJAX libraries   Acorn

User · Answer

This seems to work for me    lt html gt   lt head gt   lt script type  text javascript  src  http   www google com jsapi  gt  lt  script gt   lt script type  text javascript  gt     has the google object loaded  if  window google  amp  amp  window google load        google load  jquery    1 3 2      else       document write   lt script type  text javascript  src  http   joecrawford com jquery-1 3 2 min js  gt  lt   script gt       window onload   function             test   css   border   2px solid  f00         lt  script gt   lt  head gt   lt body gt       lt p id  test  gt hello jQuery lt  p gt   lt  body gt   lt  html gt    The way it works is to use the google object that calling http   www google com jsapi loads onto the window object  If that object is not present  we are assuming that access to Google is failing  If that is the case  we load a local copy using document write   I m using my own server in this case  please use your own for testing this    I also test for the presence of window google load - I could also do a typeof check to see that things are objects or functions as appropriate  But I think this does the trick   Here s just the loading logic  since code highlighting seems to fail since I posted the whole HTML page I was testing   if  window google  amp  amp  window google load        google load  jquery    1 3 2      else       document write   lt script type  text javascript  src  http   joecrawford com jquery-1 3 2 min js  gt  lt   script gt         Though I must say  I m not sure that if this is a concern for your site visitors you should be fiddling with the Google AJAX Libraries API at all   Fun fact  I tried initially to use a try  catch block for this in various versions but could not find a combination that was as clean as this  I d be interested to see other implementations of this idea  purely as an exercise

User · Answer

The easiest and cleanest way to do this by far    lt script src    ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script src  path to your jquery  gt  lt   script gt    lt  script gt

User · Answer

If you have modernizr js embedded on your site  you can use the built-in yepnope js to load your scripts asynchronously - among others jQuery  with fallback    Modernizr load        load      ajax googleapis com ajax libs jquery 1 7 2 jquery min js          test   window jQuery      nope    path to local jquery-1 7 2 min js       both     myscript js    another-script js        complete   function              MyApp init                 This loads jQuery from the Google-cdn  Afterwards it s checked  if jQuery was loaded successfully  If not   nope    the local version is loaded  Also your personal scripts are loaded - the  both  indicates  that the load-process is iniated independently from the result of the test   When all load-processes are complete  a function is executed  in the case  MyApp init    I personally prefer this way of asynchronous script loading  And as I rely on the feature-tests provided by modernizr when building a site  I have it embedded on the site anyway  So there s actually no overhead

[jquery] Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

Examples related to jquery

Examples related to cdn

Examples related to google-ajax-libraries