javascriptgwtdynamiconreadystatechange

Check loading of Javascript properly


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


Solution

  • 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
    }