Check loading of Javascript properly

Question

I have 10 js files. I am loading all the file before java class load. But I need to check that all the files are loaded properly then I call my java class.

Firstly I call one js file which load my all the required js files, here I need to check the my all the 10 js file loaded properly then I need to call one function.

here is my code

loadpackage("0.js",callback);
loadpackage("1.js",callback);
loadpackage("2.js",callback);
loadpackage("3.js",callback);
loadpackage("4.js",callback);
loadpackage("5.js",callback);
loadpackage("6.js",callback);
loadpackage("7.js",callback);
loadpackage("8.js",callback);
loadpackage("9.js",callback);
loadpackage("10.js",callback);


function loadpackage(path, callback) {

    var done = false;
    var scr = document.createElement('script');

    scr.onload = handleLoad;
    scr.onreadystatechange = handleReadyStateChange;
    scr.onerror = handleError;
    scr.src = path;
    document.body.appendChild(scr);

    function handleLoad() {
        if (!done) {
            done = true;
            callback(path, "ok");
        }
    }

    function handleReadyStateChange() {
        console.log("readystate1");
        var state;

        if (!done) {
            console.log("readystate2");
            state = scr.readyState;
            console.log("readystate3");
            if (state === "complete") {
                console.log("readystate4");
                handleLoad();
            }
        }
    }
    function handleError() {
        if (!done) {
            done = true;
            callback(path, "error");
        }
    }
}

function callback(path, message) {
    console.log(path+" :: "+message);
}

Some where I read that onreadystatechange event tells that files are loaded successfully but here onreadystatefunction not called.

So please help me out of this problem how to check that my all 10 js files are loaded properly.

Some of the question answer this problem using jQuery but I cannot use jQuery, I need the answer in JavaScript or GWT

Framework : GWT 2.6.0
I am working on GWT in which Java Class are used & to perform some operations I need to load js files

Possible duplicate of [How to detect if javascript files are loaded](http://stackoverflow.com/questions/1293367/how-to-detect-if-javascript-files-are-loaded) — OddDev, Oct 12 '15 at 06:10
The first thing I would do is to put all the .js files into one file — mwarren, Oct 12 '15 at 06:16
Not possible for me, actually building an application need to separate the files — Kushal Jain, Oct 12 '15 at 06:19
Are you using [tag:java] or [tag:javascript]? They're not the same language. Java is to JavaScript what "ham" is to "hamster" — Cerbrus, Oct 12 '15 at 06:19
I am working on GWT in which Java Class are used and to perform some operation i need to load js files — Kushal Jain, Oct 12 '15 at 06:20
Okay, is Java relevant to the question here? I don't think so. — Cerbrus, Oct 12 '15 at 06:21
No java is no relevant, I just told that what i did after all the js loaded — Kushal Jain, Oct 12 '15 at 06:23
Have a look at the following answer (using the `load` event on the `script` tags): http://stackoverflow.com/a/16231055/1105858 — nils, Oct 12 '15 at 06:27
@KushalJain Would you mind checking the duplicated question again? The answer is completely written in vanilla js and addresses your question just perfectly. (T.J. Crowder is a awesome js dev btw) — OddDev, Oct 12 '15 at 07:18

azium · Accepted Answer · 2015-10-12T06:30:20.007

2

Create some counter then decrement it everytime onload callback fires. When it hits 0, do what you need.

var scripts = ['1.js', '2.js', ...]
var scriptsToLoad = scripts.length

scripts.forEach(loadScript)

function loadScript (path) {
  var scr = document.createElement('script')

  scr.onload = function () {
    scriptsToLoad -= 1

    if (scriptsToLoad === 0) doYourJavaThing()
  }

  scr.src = path
  document.body.appendChild(scr)
}

function doYourJavaThing () {
  // la la la
}

edited Oct 12 '15 at 06:30

answered Oct 12 '15 at 06:28

azium

20,056
7
57
79

when onload function fires ? it fires when the script is start loading or it fires when the script totally loaded ? – Kushal Jain Oct 12 '15 at 06:30
@nils thanks. to OP: it fires when the script is finished loading. https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement#defer_property – azium Oct 12 '15 at 06:31
1

Note: this may result in scripts being executed out of order (e.g. if `2.js` finishes downloading before `1.js`, then 2 will execute before 1, [demo](http://jsfiddle.net/nauzilus/or8om2h6/)). If that's not an issue, this method will work fine. Otherwise, you'll need to load them sequentially: [demo](http://jsfiddle.net/nauzilus/gfo70bjf/) – Daniel Flint Oct 13 '15 at 01:42

guramidev · Answer 2 · 2015-10-12T06:45:10.850

As i see it you will have to use Promise in this case, meaning your function which loads script would be very handy to be returning a promise like this:

//Change your function to this:
function loadpackage( path, resolve, reject ) {

    var done = false;
    var scr = document.createElement('script');

    scr.onload = handleLoad;
    scr.onreadystatechange = handleReadyStateChange;
    scr.onerror = handleError;
    scr.src = path;
    document.body.appendChild(scr);

    function handleLoad() {
        if (!done) {
            done = true;
            resolve( { path:path,status:'ok' } );
        }
    }

    function handleReadyStateChange() {
        console.log("readystate1");
        var state;

        if (!done) {
            console.log("readystate2");
            state = scr.readyState;
            console.log("readystate3");
            if (state === "complete") {
                console.log("readystate4");
                handleLoad();
            }
        }
    }
    function handleError() {
        if (!done) {
            done = true;
            reject( { path:path,status:'error' } );
        }
    }
}

//Use promises


var promises = [];

promises.push( new Promise( function( resolve,reject ){

    loadpackage( "0.js", resolve, reject )

}) );
promises.push( new Promise( function( resolve,reject ){

    loadpackage( 'path', resolve, reject )

}) );
promises.push( new Promise( function( resolve,reject ){

    loadpackage( "1.js", resolve, reject )

}) );

//...etc

//And finally wait untill all of them are resolved

Promise.all( promises ).then( function( value ){

    //Here you absolutely know that all files have loaded, 
    //and you can fire callback here for each of them like

    callbak( value.path, value.status );

});

Check loading of Javascript properly

2 Answers2