Load jquery asynchronously before other scripts

Question

I've added the async attrib to my javascript inclusion HTML.
So now I've:

<script async src="jquery.myscript.js"></script>

And this works with all JS I load, all except jquery.

If I add async to jQuery <script> tag all others script who depend from jquery don't work.

In that jsfiddle you can see the problem:
http://jsfiddle.net/uFbdV/

In the example I've used <script> Mycode </script> instead of including an external file.js, but this doesn't change the situation.

I'd like to run jQuery with async attrib and run other few external scripts asynchronously only after jquery is loaded.

It is possible?

Answer 1

This may be what you are looking for:
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl an asynchronous jQuery Loader.

It asynchronously loads jQuery without blocking other components:

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');

jQl automatically catches all jQuery().ready() calls, so you can write:

<script type="text/javascript">
  jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
  jQuery('document').ready(function(){
    alert('Hello world');
  });
</script>

jQl will queue these function calls, and execute them as soon as jQuery is loaded and the DOM is ready, as they would be executed in the usual way.

Answer 2

This is a great use-case for defer:

<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>

Neither of these tags will block rendering. The browser can download jquery.js and custom.js in parallel. It will execute jquery.js as soon as it has been downloaded and the DOM has been loaded, and custom.js will execute afterwards.

Sadly, there a few issues:

• You can't use the defer attribute for inline scripts.
• IE < 10 has been documented to cause scripts with defer to unexpectedly interleave their execution.
• I can't find any specs that say that scripts with the defer order are meant to be executed in order, just that they are meant to be executed after the DOM loads.

Answer 3

Using a recursive function

I have written a function to do this job very nice.

// scripts.js


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();
        }
    }
}

/* Write links sorted from last one to first to load */
/* Here, jquery will be loaded first, then materialize and then wow libray. */
urls = [ '/js/wow.js', '/js/materialize.js',  '/js/jquery.js'];

loadScripts(urls, urls.length, function(){
    /* Codes inside of here will be executed after js files load */

});

You can put these code in a file like scripts.js and load it with async attribute.

<script async src="js/scripts.js"></script>

For css async load, refer to edited versions of this answer.

Answer 4

<script>var JSdep = [
        ["//ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.4.min.js", "window.jQuery", "/bundle/jquery"],
        ["//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", "self.framework === 'bootstrap'", "/bundle/bootstrap"],
        ["//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", "window.jQuery && window.jQuery.ui && window.jQuery.ui.version === '1.12.1'", "/bundle/jqueryui"],
        ["//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js", "window.jQuery && window.jQuery.fn.selectpicker", "/bundle/bootstrap-select"],
    ]
</script>
<script type="text/javascript">
    var downloadJSAtOnload = function (e) {
        var src = e.srcElement.src.toString();
        //console.log("[jquery] loaded", src);
        for (var i = 0; i < JSdep.length; i++) {
            if (src.indexOf(JSdep[i][0]) !== -1) {
                if ((!JSdep[i][1]) || (eval(JSdep[i][1]))) {
                    console.log("[jquery] loaded ok", src);
                    break;
                } else {
                    console.log("[jquery] fail", src);
                    return;
                }
            }
        }
        if (i === JSdep.length) {
            console.log("[jquery] fallback loaded ok", src);
        }
        if (jqloaded) {
            return;
        }
        jqloaded = true;
        for (var i = 1; i < JSdep.length; i++) {
            //console.log("[jquery] loading", JSdep[i][0], JSdep[i][1], JSdep[i][2]);
            var raf2 = requestAnimationFrame || mozRequestAnimationFrame ||
                webkitRequestAnimationFrame || msRequestAnimationFrame;
            if (raf2) { window.setTimeout(dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]), 0); }
            else window.addEventListener('load', dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]));
        }
    }
    var downloadJSAtOnerror = function (e) {
        var src = e.srcElement.src.toString();
        console.log("[jquery] error", src);
        for (var i = 0; i < JSdep.length; i++) {
            if (src.indexOf(JSdep[i][0]) !== -1) {
                console.log("[jquery] failed try fallback", src);
                dljquery([JSdep[i][2], JSdep[i][1]]);
                return;
            }
        }
        console.log("[jquery] failed on fallback", src);
        return;
    }
    // Add a script element as a child of the body
    var dljquery = function (src) {
        //console.log("[jquery] start", src);
        var element = document.createElement("script");
        element.src = src[0];
        element.async = "async";
        try {
            document.body.appendChild(element);
        } catch (err) {
            console.log("[jquery] err", err);
        }
        if (element.addEventListener) {
            element.addEventListener("load", downloadJSAtOnload, false);
            element.addEventListener("error", downloadJSAtOnerror, false);
        } else if (element.attachEvent) {
            element.attachEvent("onload", downloadJSAtOnload);
            element.attachEvent("onerror", downloadJSAtOnerror);
        } else {
            element.onload = downloadJSAtOnload;
            element.onerror = downloadJSAtOnerror;
        }
    }
    //        var fb = "/bundle/jquery";

    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function () { window.setTimeout(dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]), 0); });
    else window.addEventListener('load', dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]));

    var jqloaded = false;

    function doOnload() {
        console.log("[jquery] onload");
    }
    // Check for browser support of event handling capability
    if (window.addEventListener)
        window.addEventListener("load", doOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", doOnload);
    else window.onload = doOnload;
</script>

found it i had problems with bootstrap loads sometimes before jquery now np hope it helps others i put this script at head but gave an error cant appendChild now its before /body and checked works for all browsers i tryed script async but it didn't have an event that tell me when the download ends and some times bootstrap loaded before jquery and vise versa because bootstrap depend on jquery i had to load jquery and then start download bootstrap now i'll add fallback

fixed it

now it checks that jq loaded

and only then loads others

ok now its copy paste

Answer 5

I'd like to run jQuery with async attrib and run other few external scripts asynchronously only after jquery is loaded.

What does that mean? It sounds a lot like you want to load jQuery first, then other things when it's done. So you want to load it synchronously. If you still want to use the async way, you could define an onload function to continue loading other things once jQuery is ready. Or you could use defer. Both of these are explained here: https://davidwalsh.name/html5-async