1

I want to load a constants file as per the language the user has selected. For that I want to load the scripts dynamically.

<html>
  <body>
    <script type="text/javascript">
      var jsElement = document.createElement("script");
      jsElement.type = "application/javascript";
      jsElement.src = "../constants.en.js";
      document.body.appendChild(jsElement);
    </script>
    <script type="text/javascript" src="../js/RandomScript.js"></script>
  </body>

Whole code is in HTML.

When I tried the code above, RandomScript.js is loaded before the constant file.

How can I maintain sequence of loading files.

I am not using jQuery or something, so is there any way to do interpolation of src of script?

sao
  • 1,469
  • 6
  • 14
  • 30
CHIRAG BAVISHI
  • 13
  • 3
  • Possible duplicate of [Call javascript function after script is loaded](https://stackoverflow.com/questions/14644558/call-javascript-function-after-script-is-loaded) – norbitrial Oct 07 '19 at 12:43

3 Answers3

0

You can use onload event listener to load .js files sequentially.

First create an array of URLs of scripts. Then loop through it recursively. onload event listener ensures that the scripts are loaded sequentially.

var scriptURLs = [
   "../constants.en.js",
   "../js/RandomScript.js"
];

function loadScript(index){
  if(index >= scriptURLs.length){
    return false;
  }

  var el = document.createElement('script');
  el.onload = function(){
    console.log("Script loaded: ", scriptURLs[index]);
    loadScript(index+1);
  }
  el.src = scriptURLs[index];
  document.body.appendChild(el);
  // OR
  // document.head.appendChild(el);
}

loadScript(0); // Load the first script manually.

Hope this helps.

Harun Yilmaz
  • 6,857
  • 3
  • 21
  • 31
  • what if there are so many script loaded directly like randomScript. should I make array of all script's src and load this way? – CHIRAG BAVISHI Oct 09 '19 at 05:47
  • If you want to load the other scripts in a specific order, with this approach the only thing you need is to add the URL in the array with the order. But if you don't mind the loading order, you can load them directly. – Harun Yilmaz Oct 09 '19 at 06:23
  • @CHIRAGBAVISHI Usually I don't prefer to do this but since you're a new contributor, I would like to ask you to upvote and mark the answer as accepted. This way the future readers will have a chance to quickly find the answer for their own questions. Have a nice day. – Harun Yilmaz Oct 09 '19 at 11:45
  • but ajax calling before file is loading, as there so many files – CHIRAG BAVISHI Oct 16 '19 at 06:42
  • Sorry, I couldn't quite get it. Can you provide an example of the use cases somewhere like plunker or stackblitz? – Harun Yilmaz Oct 16 '19 at 06:44
  • I have there are some ajax call in main page, if we load scripts dynamically then those ajax called after some script loaded even though ajax call is after the loading script dynamic. – CHIRAG BAVISHI Oct 21 '19 at 11:30
  • cant't I load script like to load script dyanmically? – CHIRAG BAVISHI Nov 11 '19 at 10:25
0
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
document.body.appendChild(jsElement);

jsElement.onload = () => {
    callyournewScript();
}

jsElement.src = "../constants.en.js";
Krishna Raj Salim
  • 7,061
  • 5
  • 29
  • 62
Samet Karaca
  • 83
  • 6
  • 3
    Code-only answers are considered low quality: make sure to provide an explanation what your code does and how it solves the problem. – help-info.de Oct 07 '19 at 13:15
-1

Load the ../js/RandomScript.js after loading the ../constants.en.js like following 

<body>
    <script type="text/javascript">
      var jsElement = document.createElement("script");
      jsElement.type = "application/javascript";
      jsElement.src = "../constants.en.js";
      document.body.appendChild(jsElement);

      var script = document.createElement("script");
      script.src = "../js/RandomScript.js";
      script.type = "text/javascript";
      document.getElementsByTagName("head")[0].appendChild(script);

    </script>
  <!--  <script type="text/javascript" src="../js/RandomScript.js"></script> -->
</body>
megna
  • 11
  • 3