JAVASCRIPT

how to set javascript load order in html

Perfect match for your query!

If none of the solutions worked for you then please refer to the below solution of mine which I have developed from my side.

I was also looking for the solution but after searching a lot, I summarized my code as below which is working perfectly for me!!

This is useful when you want functionality such that after previous script has fully loaded then and then only load next script!


just create a file named jsLoadScripts.js and insert it into the head or at the bottom of the body.


    //From Shree Aum Software Solutions
    //aumsoftwaresolutions@gmail.com

    //script incrementor for array
    scriptIncrementor = 0;
    
    //define your script urls here
    let scripts = [
        "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
        "jsGlobalFunctions.js",
        "jsDateParser.js",
        "jsErrorLogger.js",
        "jsGlobalVariables.js",
        "jsAjaxCalls.js",
        "jsFieldsValidator.js",
        "jsTableClickEvent.js",
        "index.js",
        "jsOnDocumentReady.js",
    ];
    
    //it starts with the first script and then adds event listener to it. which will load another script on load of it. then this chain goes on and on by adding dynamic event listeners to the next scripts! 
    function initializeScripts() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = scripts[scriptIncrementor];
        document.head.appendChild(script);
        script.addEventListener("load", function () {
            loadNextScript();
            scriptIncrementor++;
        });
    }
    
    // this function adds event listener to the scripts passed to it and does not allow next script load until previous one has been loaded!
    function loadNextScript() {
        if (scriptIncrementor != scripts.length - 1) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = scripts[scriptIncrementor + 1];
            document.head.appendChild(script);
            script.addEventListener("load", function () {
                loadNextScript();
                scriptIncrementor++;
            });
        }
    }
    
    // start fetching your scripts
    window.onload = function () {
        initializeScripts();
    };

This may cause you some speed related issues so, you can call function `initializeScripts()` with your custom needs!

If this worked for you please upvote the solution!

Thank you!