CODEWITHSUNDEEP
javascripthtml
Gihan
Gihan

Reputation: 3749

Load Multiple Scripts After Page Has Loaded?

I am using following code inside my HTML to load a JS file after page load.(DOMContentLoaded)

<script>
document.addEventListener('DOMContentLoaded', function() {
  var script = document.createElement('script');
  script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
  document.getElementsByTagName('body')[0].appendChild(script);
});
</script>

But I have several scripts to load and I have no idea how to do this in the best possible way. For example, I have following files to link.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

Any help would be greatly appreciated.

Upvotes: 2

Views: 115

Answers (1)

Ix76
Ix76

Reputation: 86

If you know upfront the script names you can define an array like:

var scripts = ["script1.js", "anotherscript.js", "whatever.js"];

And then loop through it, and for each script you can append it as you did before

var scriptName;
for (scriptName in scripts) {
  // create the script and set the src = scriptName as before
}

Upvotes: 1

Related Questions