Secuencia de carga de scripts en html

Question

Quiero cargar un archivo de constantes según el idioma que haya seleccionado el usuario. Para eso quiero cargar los scripts dinámicamente.

<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>

Todo el código está en HTML.

Cuando probé el código anterior, RandomScript.js se carga antes del archivo constante.

¿Cómo puedo mantener la secuencia de carga de archivos?

No estoy usando jQuery o algo así, ¿hay alguna forma de hacer la interpolación de src del script?

javascript html

1

CHIRAG BAVISHI 7 oct. 2019 a las 15:37

Answer 1

Puede usar el escuchador de eventos onload para cargar archivos .js secuencialmente.

Primero cree una matriz de URL de scripts. Luego repítelo recursivamente. El escuchador de eventos onload garantiza que los scripts se carguen secuencialmente.

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.

Espero que esto ayude.

0

Harun Yilmaz 7 oct. 2019 a las 12:54

Answer 2

Cargue el ../js/RandomScript.js después de cargar el ../constants.en.js como sigue

<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>

2

megna 7 oct. 2019 a las 12:44

Answer 3

var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
document.body.appendChild(jsElement);

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

jsElement.src = "../constants.en.js";

0

Krishna Raj Salim 7 oct. 2019 a las 16:46

Secuencia de carga de scripts en html

3 respuestas

Nuevas preguntas

javascript