How can I run a fallback copy of jQuery after the DOM is loaded?

问题

The following are the first lines of code in a <script> tag just above the closing body tag in my document (it specifies that a locally-served copy of jQuery is run in the event that Google's CDN fails):

if(!window.jQuery){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/js/jquery.js';
    var scriptHook = document.getElementsByTagName('script')[0];
    scriptHook.parentNode.insertBefore(script, scriptHook);
}


jQuery(document).ready(function($){
// page behaviors
});

It does execute successfully, in the sense that if my computer is not connected to the Internet (this is a locally-served page), the local copy of jQuery is inserted. However, the document.ready() section below does not execute. I'm guessing this is because it is invoked before the fallback copy of jQuery takes effect. What's the proper practice for somehow "delaying" its execution so that either copy of jQuery will work properly?

回答1:

You need to be sure that the script you are appending to the dom has finished loading before calling jQuery. You can do this with the technique described here:

if(!window.jQuery){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/js/jquery.js';
    script.onreadystatechange= function () {
      if (this.readyState == 'complete') jQueryLoaded();
    }
    script.onload = jQueryLoaded;
    var scriptHook = document.getElementsByTagName('script')[0];
    scriptHook.parentNode.insertBefore(script, scriptHook);
}

function jQueryLoaded() {  };

You can also fetch the jQuery contents as an Ajax request, create a script tag with those as the body of the script and append it. That would also work.

回答2:

Consider using an existing script loader such as yepnope. There's an example of exactly what you're trying to do on the home page.

回答3:

Try that

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script>
    jQuery(document).ready(function($){
        // page behaviors
    });
</script>

This way the script tag will be loaded synchronously.

回答4:

The question "of how do I cope with my CDN failing and load a file hosted on my server" seems to come up a few times lately.

Question I'd ask is whether adding yet more js is the way to achieve the resilience and what level of resilience do the js approaches really add e.g. if the CDN is down they'll be a quick failure but how well do these approaches if the CDN is slow to respond how well do these solutions cope?

An alternative way to approach this is treat it as an infrastructure problem...

Run a CDN based on a domain/sub-domain you own. Have automated monitoring on it's availability, when it fails switch the DNS over to a backup server (anycast may provide an alternative solution too)

回答5:

A php solution would be something like this:

$google_jquery = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
$fp = @fsockopen($google_jquery, 'r');
if (!$fp) 
{
    echo '<script type="text/javascript" src="js/jquery.js"></script>';
} 
else
{ 
    echo '<script src="'.$google_jquery.'"></script>' }
}

来源：https://stackoverflow.com/questions/7864319/how-can-i-run-a-fallback-copy-of-jquery-after-the-dom-is-loaded

标签

javascript

jquery

cdn

document-ready