Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This seems to work for me:</p> <pre><code>&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; </code></pre> <p>The way it works is to use the <code>google</code> object that calling <a href="http://www.google.com/jsapi" rel="noreferrer">http://www.google.com/jsapi</a> loads onto the <code>window</code> 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 <code>document.write</code>. <em>(I'm using my own server in this case, please use your own for testing this).</em></p> <p>I also test for the presence of <code>window.google.load</code> - I could also do a <code>typeof</code> check to see that things are objects or functions as appropriate. But I think this does the trick.</p> <p>Here's just the loading logic, since code highlighting seems to fail since I posted the whole HTML page I was testing:</p> <pre><code>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;'); } </code></pre> <p>Though I must say, I'm not sure that if this is a concern for your site visitors you should be fiddling with the <a href="https://developers.google.com/speed/libraries/" rel="noreferrer">Google AJAX Libraries API</a> at all.</p> <p><strong>Fun fact</strong>: <em>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.</em></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload