Download jQuery from an external source if it is not loaded

Question

download jQuery from source

What I like to do is leave my local jquery.js and it was hosted somewhere else. But what if Google doesn't work? So let the code fall back that uses a different source if jQuery is still not loaded ...

I did this test case, but it doesn't seem to work, maybe someone can help me:

http://jsfiddle.net/RBz4n

Answer 1

This works pretty well (from HTML5 Boilerplate ):

<!-- Grab Google CDN jQuery. fall back to local if necessary --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script> 

Answer 2

Here is a clean javascript solution that starts by detecting jQuery. If not, he tries the CDN version. If this is not available, it tries to run the local version. Handles 404 errors. I use this in a solution that does not know if the jQuery site has been enabled.

 <script> if (typeof jQuery === "undefined") { loadjQuery("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", verifyJQueryCdnLoaded); } else main(); function verifyJQueryCdnLoaded() { if (typeof jQuery === "undefined") loadjQuery("script/jquery-1.6.1.js", main); else main(); } function loadjQuery(url, callback) { var script_tag = document.createElement('script'); script_tag.setAttribute("src", url) script_tag.onload = callback; // Run callback once jQuery has loaded script_tag.onreadystatechange = function () { // Same thing but for IE if (this.readyState == 'complete' || this.readyState == 'loaded') callback(); } script_tag.onerror = function() { loadjQuery("script/jquery-1.6.1.js", main); } document.getElementsByTagName("head")[0].appendChild(script_tag); } function main() { if (typeof jQuery === "undefined") alert("jQuery not loaded."); $(document).ready(function () { // Rest of your code here... }); } </script> 

Answer 3

The problem with your script is that you did not wait for the script to load before testing jQuery downloads. Instead, use something like this:

 function loadScript(src, callback) { var head=document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.onreadystatechange = function () { if (this.readyState == 'complete' || this.readyState == 'loaded') { callback(); } } script.onload = callback; script.src = src; head.appendChild(script); } function isjQueryLoaded() { return (typeof jQuery !== 'undefined'); } function tryLoadChain() { var chain = arguments; if (!isjQueryLoaded()) { if (chain.length) { loadScript( chain[0], function() { tryLoadChain.apply(this, Array.prototype.slice.call(chain, 1)); } ); } else { alert('not loaded!'); } } else { alert('loaded!'); } } tryLoadChain( 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js', 'mine.js'); 

Answer 4

Problem

If you use Firebug and see where jQuery loads, you can see how Google successfully downloaded it. Why is this not working? Since the requests are asynchronous and your script runs synchronously, it takes all the steps until the first script is loaded.

So:

• jQuery no.
• Add a script element to download from Google (the browser sends a request and continues to execute the script)
• jQuery no add another source
• ...

etc.

Decision

What you need to do is attach the script load elements to the onLoad event and check jQuery after loading them.

Script is executed at lightning speed compared to sending a request to a server on the Internet and receiving results for processing.

Additional notes

As I already read, you will have problems finding 404s using this technique. The proposed method is to use Ajax (XHR), and then attach the script element and add the received content to it. This would be the most reliable way to do this for all browsers.

Answer 5

Roger's answer is ridiculous. Here, use its 2 lines instead.

 <script>window.jQuery || document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="Content/Scripts/jquery-1.9.1.min.js"><\/script>')</script>