After combing the Internet and failing to find a simple method to dynamically load multiple JS files, (while guaranteeing the loading of each), I have put together one of my own. The advantage of the script below is that this allows you to:
1) Dynamically load multiple JS files using a single JS file, preventing you from updating a separate file numerous times. This can be very handy during development when many changes are made to the scripts being loaded, and also for scalability purposes- this script can be placed on numerous pages (that require the same scripts) and when updates need to be made, they can be done from a single location.
2) Loading scripts this way guarantees that each script will be fully loaded before calling the succeeding script, preventing dependency conflicts.
3) Does not require jQuery.
4) Compatible with all modern browsers (IE8+, Chrome, Firefox, Safari, Opera, Edge).
The script below takes advantage of the
onreadystatechange DOM events before loading the next script in the
Keep in mind, if this script is loaded in the
head of the page, it will not be able to load scripts into the body, because the body of the document has not been loaded yet.