Load jquery core asynchronous with fallback

Question

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.

Why not include jQuery at end of the BODY, but synchronously? BTW, what about `defer|async` HTML5 script attribute? — A. Wolff, Feb 20 '14 at 13:41
I don't see any sense in loading jQuery asynchronously. And jQuery itself normally is not blocking loading very long. Do you really think you can increase customer experience dramatically by making it load asynchronously? — Seb, Feb 20 '14 at 13:48
@A.Wolff The reason is that the system is modulair and I cannot foresee possible jQuery inline calls. I like the way this script works because it catches and queues jQuery calls so the system won't break. But maybe I should re-prioritize and fix all those issues when they come. — Dennis Poort, Feb 20 '14 at 19:36
@Seb It does feel faster, and in the Google Pagespeed Insight analysis the score went up about 10 points, which is a good selling point. — Dennis Poort, Feb 20 '14 at 19:37
you could `// @codekit-prepend "jquery.js"` into your `global.js` and call it with the `async` prop at the end of the html. — Andres SK, Dec 18 '14 at 22:19

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

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)

edited May 23 '17 at 12:32

Community

1
1

answered Feb 17 '15 at 07:26

Bhagvan Parge

1

3

That is a good and common way to call jquery from a CDN with a local fallback. However, this doesn't really seem to be an answer to my question. – Dennis Poort Feb 17 '15 at 13:00

score 0 · Answer 2 · answered Mar 25 '17 at 09:58

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!

Load jquery core asynchronous with fallback

2 Answers2

Linked