Defer Loading of javascript for google page insights

Question

I have a code for defer loading of javascript I am wondering if the code will load the scripts in order (JQuery.min first) according to where they are in the code ?

function downloadJSAtOnload() {


var element01 = document.createElement("script");
element01.src = "js/jquery.min.js";
document.body.appendChild(element01);

var element02 = document.createElement("script");
element02.src = "js/plugins.js";
document.body.appendChild(element02);

var element03 = document.createElement("script");
element03.src = "js/scripts.js";
document.body.appendChild(element03);


var element04 = document.createElement("script");
element04.src = "js/SmoothScroll.min.js";
document.body.appendChild(element04);

var element05 = document.createElement("script");
element05.src = "js/contact-form.js";
document.body.appendChild(element05);

}

if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

If this doesn't load JQuery.min first and then the other js files how can you make JQuery.min the first script to load and then the rest after that has loaded? Also I am guessing for example the contact-form.js will be one of the first to finish loading as it's small so this could cause the Uncaught ReferenceError: $ is not defined I'm guessing because the JQuery.min hasn't finished downloading so how would you solved this ? I'm guessing an listener / if finished loading load the others else wait... Thanks in advance

You are correct, you are calling them in order by you can't be certain they will come back in the same order. Callbacks or promises would solve this. — Jarek Kulikowski, Jul 21 '17 at 15:56
could you use a promise to load jquery.min and then on the resolution of that load the rest? — CumminUp07, Jul 21 '17 at 16:07
Unfortunately, neither do I, but their ability to do synchronous things seems like it fits your need — CumminUp07, Jul 21 '17 at 16:12

Jarek Kulikowski · Answer 1 · 2017-07-21T16:49:48.853

1

This is quick, but I think it should work.

function downloadJSAtOnload() {
    var element01 = document.createElement("script");
    element01.src = "js/jquery.min.js";
    document.body.appendChild(element01);

    element01.onload = function() {
        var element02 = document.createElement("script");
        element02.src = "js/plugins.js";
        document.body.appendChild(element02);

        var element03 = document.createElement("script");
        element03.src = "js/scripts.js";
        document.body.appendChild(element03);


        var element04 = document.createElement("script");
        element04.src = "js/SmoothScroll.min.js";
        document.body.appendChild(element04);

        var element05 = document.createElement("script");
        element05.src = "js/contact-form.js";
        document.body.appendChild(element05);
    }
}

edited Jul 21 '17 at 16:49

answered Jul 21 '17 at 16:02

Jarek Kulikowski

1,399
8
9

I'm trying to satisfy googles page insights / above the fold on my site files so looking for a solution that loads the jquery.min.js and also gets rid of the above fold warnings on the file – ui-unicorn.co.uk Jul 21 '17 at 16:04
@Neths so, you want to be able to load jquery.min.js and once it is fully loaded then load the rest? Would that solve your problem? – Jarek Kulikowski Jul 21 '17 at 16:08
I assume it would because if the juqery.min.js is fully loaded first it won't throw the $ is not defined error – ui-unicorn.co.uk Jul 21 '17 at 16:10
this throws Uncaught SyntaxError: Unexpected end of input – ui-unicorn.co.uk Jul 22 '17 at 20:18

score 1 · Accepted Answer · answered Jul 21 '17 at 16:19

1

found here Load jQuery with JavaScript using Promises

function loadScript(url) {
    return new Promise(function(resolve  reject) {
        var script = document.createElement("script");
        script.onload = resolve;
        script.onerror = reject;
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    });
}

function loadjQuery() {
    if (window.jQuery) {
        // already loaded and ready to go
        return Promise.resolve();
    } else {
        return loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js');
    }
}


// Usage:
loadjQuery().then(function() {
    // code here that uses jQuery
}, function() {
    // error loading jQuery
});

answered Jul 21 '17 at 16:19

CumminUp07

1,936
1
8
21

This looks good, but does the script have to be appended to the head? Why not after the closing body tag? Will this code using promises work cross browser? Another small issue, potentially, Google will punish page load if the full render (on load) takes too long, not just first render. Will this code not infringe on the native onload? This would be an amazing solution, just wondering if it works and how. – ptts Jul 21 '17 at 16:58
@ptts I don't think it should matter where it is appended to. according to this https://stackoverflow.com/questions/22516959/how-to-determine-if-a-promise-is-supported-by-the-browser it is cross browser compatible – CumminUp07 Jul 21 '17 at 17:02
Wow, this is great then. However, which one of the replies in the link is the one which works? There is some controversy if I read all answers. – ptts Jul 21 '17 at 17:07
I looked at the most updated one from december of last year – CumminUp07 Jul 21 '17 at 17:08
I assume I use var element05 = document.createElement("script"); etc etc where // code here that uses jQuery is also are there any downsides to this approach vs pure javascript? – ui-unicorn.co.uk Jul 21 '17 at 17:23
yes, that is where you would load your other scripts. This is pure javascript – CumminUp07 Jul 21 '17 at 17:28
Whats browser support like with promise – ui-unicorn.co.uk Jul 22 '17 at 20:46
@Neths according to this https://stackoverflow.com/questions/22516959/how-to-determine-if-a-promise-is-supported-by-the-browser is cross browser compatible – CumminUp07 Jul 22 '17 at 23:18
My problem was I loaded scripts after jQuery and some of them have dependencies on others. For such scripts I have put script.async=false; script.defer=true to make them run in order – Svitlana Apr 10 '18 at 11:14

Defer Loading of javascript for google page insights

2 Answers2