Callback function after multiple scripts loaded

Question

I have two script file like this

  <script  onload="mready();" src="moment.js"></script>
  <script  onload="jready();" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Above code calls mready() after moment.js is loaded and jready() after jquery loaded , How do I call another function after both scripts are loaded.

No , sometimes when the scripts are big , smaller scripts are getting loaded first. — Gracie williams, Dec 14 '20 at 15:38
No, that is simply not true. The size of a script doesn't matter. Unless the `async` or `defer` attribute is added to the tag, scripts will always load in full then run, in order. — , Dec 14 '20 at 15:43
Here's the reference question: https://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts (this isn't a duplicate though, since you're trying to solve a problem that doesn't exist) — , Dec 14 '20 at 15:56

score -1 · Answer 1 · answered Dec 14 '20 at 15:24

Just write a function to check if both are ready:

let mIsReady = false;
let jIsReady = false;

function mready () {
    mIsReady = true;
    ready();
}

function jready () {
    jIsReady = true;
    ready();
}

function ready () {
    if (mIsReady && jIsReady) {
        // do what you need here
    }
}

Callback function after multiple scripts loaded

1 Answers1