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 — OddDev
– OddDev, Commented Oct 12, 2015 at 6:10
The first thing I would do is to put all the .js files into one file — mwarren
– mwarren, Commented Oct 12, 2015 at 6:16
Not possible for me, actually building an application need to separate the files — Kushal Jain
– Kushal Jain, Commented Oct 12, 2015 at 6:19
Are you using java or javascript? They're not the same language. Java is to JavaScript what "ham" is to "hamster" — Cerbrus
– Cerbrus, Commented Oct 12, 2015 at 6:19

azium · Accepted Answer · 2015-10-12 06:30:20Z

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, 2015 at 6:30

answered Oct 12, 2015 at 6:28

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kushal Jain Over a year ago

when onload function fires ? it fires when the script is start loading or it fires when the script totally loaded ?

azium Over a year ago

@nils thanks. to OP: it fires when the script is finished loading. developer.mozilla.org/en/docs/Web/API/…

Daniel Flint Over a year ago

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). If that's not an issue, this method will work fine. Otherwise, you'll need to load them sequentially: demo

guramidev · Accepted Answer · 2015-10-12 06:45:10Z

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

});

Collectives™ on Stack Overflow

Check loading of Javascript properly

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related