How to Wait Until All JavaScript Files Are Loaded Before Executing JavaScript Code

Is it possible to wait until all javascript files are loaded before executing javascript code?

You can use

$(window).on('load', function() {
    // your code here
});

Which will wait until the page is loaded. $(document).ready() waits until the DOM is loaded.

In plain JS:

window.addEventListener('load', function() {
    // your code here
})

how to wait until a dynamically included javascript file is properly loaded?

you can promisfy the loading process, by creating a promise on first script and then on the second script check if the promise is resolved.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8"/>
        <script type="text/javascript">
            var isLoaded = new Promise((res,rej) => {
              function include_once(url) {
                  /*
                  [additional code to check if 'url' was already included]
                  */
                  var script = document.createElement("script");
                  script.type = "text/javascript";
                  script.onload = () => res()
                  script.onerror = () => rej()
                  script.src = url;
                  document.head.appendChild(script);
              }
              include_once("https://code.jquery.com/jquery-3.6.0.min.js");
          })
          
        </script>
    </head>
    <body>
        <script type="text/javascript">
            isLoaded.then(() => {
              $(document).ready(function(){
                console.log("ready");
            });
            })
        </script>
    </body>
</html>

Wait until a script is downloaded and executed and wait for DOM to be loaded

Can be achieved fairly simply by placing the dependent code within the 'done' event (I thought there may be an event that may achieved the same thing)

How to make script execution wait until jquery is loaded

edit

Could you try the correct type for your script tags?
I see you use text/Scripts, which is not the right mimetype for javascript.

Use this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="../Scripts/facebox.js"></script>

end edit

or you could take a look at require.js which is a loader for your javascript code.

depending on your project, this could however be a bit overkill

Wait until js script is loaded on the page

You can just add an onload event to any script element in HTML.

ga.onload = function(ev) { alert('loaded!') };

Since this is native HTMLScriptElement behaviour it should combine fine with Dart.

Loading javascript dynamically - wait for execution?

JavaScript is neither threaded nor event-interrupted. The hole script is executed before anything else can happen. Events are captured until the browser gets back the control. So onload or any other event can only be fired before or after the script execution is done. Actually onload is fired after the execution.

There is an event beforescriptexecute still supported by firefox, however, it has been remove from HTML5.1 specs.

You can try it out yourself:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <script>

      console.log('base script start');

      var script=document.createElement('script');
      script.onload = function() { console.log('onload fired'); }

      // MDN says:
      // This event was a proposal in an early version of the specification. Do not rely on it.
      // 
      script.addEventListener('beforescriptexecute', function () { console.log('beforescriptexecute fired'); });

      script.src = 'external.js';
      document.head.appendChild(script);

      console.log('waiting 3 seconds');
      timebase = Date.now();
      while((Date.now() - timebase) < 3000)
        ;
      console.log("base script end");
    </script>

</body>
</html>

external.js:

console.log('external start... waiting 3 seconds');
timeext = Date.now();
while((Date.now() - timeext) < 3000)
  ;

console.log('external end');

base script start

waiting 3 seconds

base script end

beforescriptexecute fired

external start... waiting 3 seconds

external end

onload fired

MDN - beforescriptexecute