Load jquery core asynchronous with fallback

问题

With performance optimization and non-blocking scripts in header, I've been trying to asynchronously load the jquery itself.

I ran into a jQuery Loader script, that async loads jquery and thereafter catches and queues jquery document ready calls. This seems to work most of the time, but not always.

So I created a fallback to load a local jquery version if the loader hasn't finished within x seconds. The fallback works, but not completely. Some parts may work, others not.

Script so far called in head, after loading the jquery loader script:

<script type="text/javascript">
function loadScript(url)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

var fallback_timer = setTimeout(function() {
    loadScript('/path/to/local/js/jquery.js');
},5000);
jQl.loadjQ('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',function({clearTimeout(fallback_timer);});

</script>

Questions:

Anyone with experience with jQuery Loader (jQl) that can help out fixing the issue that it fails regularly?
Anyone who can tell me why, incase of failure, only some of my other js scripts work, but some keep failing?
I am very open to asynchronously loading jquery core with some other plugin/script/direction to look for.

To clarify, I am not looking at asynchronously loading scripts using jQuery, but loading the jquery itself asynchronously while supporting loading jquery dependent scripts somewhere down the road.

回答1:

If you looking for loading jquery first and then execute something, i can help you!

BEST SOLUTION

I wrote a function to load a lot of scripts in a row you want.

function loadScripts(urls, length, success){
    if(length > 0){
        script = document.createElement("SCRIPT");
        script.src = urls[length-1];
        console.log();
        script.onload = function() {
            console.log('%c Script: ' + urls[length-1] + ' loaded!', 'color: #4CAF50');
            loadScripts(urls, length-1, success);               
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    else
        if(success)
            success();
}

SIMPLE LOADING SCRIPTS

urls = ['https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js',
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'
    ];

loadScripts(urls, urls.length, function(){
    /* Do something here after loading all script */

});

Hope solve your problem!

回答2:

First load jQuery from CDN if not loaded successfully load from local source.

I would recommend following,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"></script>')</script>
<script type="text/javascript" src="scripts.js"></scripts>

from Load jQuery with Javascript and use jQuery

In your code you should load jQuery only when it is not loaded & check if you have not mis-spelled file path in Firebug (Net tab)

来源：https://stackoverflow.com/questions/21909554/load-jquery-core-asynchronous-with-fallback

标签

jquery

asynchronous

pagespeed