Загрузить jQuery Сначала после DOMContentLoaded

Question

Я пытаюсь загрузить несколько сценариев после события DOMContentLoaded, и я пытаюсь использовать для этого следующий сценарий. Я не уверен, что это лучший способ сделать это, но у меня проблема со следующим кодом, потому что мне нужно сначала загрузить jquery, потому что от него зависят другие мои сценарии. Я не знаю, как это сделать, любая помощь будет принята с благодарностью. Большое спасибо.

<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);
    
      var script1 = document.createElement('script');
      script1.src = '/myscript1.js';
      document.getElementsByTagName('body')[0].appendChild(script1);
    
      var script2 = document.createElement('script');
      script2.src = '/myscript2.js';
      document.getElementsByTagName('body')[0].appendChild(script2);

    
    });

    </script>

Answer 1

Пожалуйста, имейте в виду, что скрипты Dynami c по умолчанию ведут себя как async, что означает, что скрипт, который загружается первым, также запускается первым. Таким образом, проблема может заключаться в том, что myscript1.js и myscript2.js - очень маленькие скрипты, и поэтому он загружается и запускается сначала до того, как может быть загружен jquery скрипт. Чтобы исправить это, вы можете передать script.async=false каждому скрипту, чтобы скрипт загружался и запускался в том порядке, в котором они добавляются в документ, например:

document.addEventListener('DOMContentLoaded', function() {

  var script = document.createElement('script');
  script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
  script.async = false;
  document.getElementsByTagName('body')[0].appendChild(script);

  var script1 = document.createElement('script');
  script1.src = '/myscript1.js';
  script.async = false;
  document.getElementsByTagName('body')[0].appendChild(script1);

  var script2 = document.createElement('script');
  script2.src = '/myscript2.js';
  script.async = false;
  document.getElementsByTagName('body')[0].appendChild(script2);

});

и, если вы хотите сохранить вещи DRY ( Не повторяйтесь ), вы можете использовать вспомогательную функцию, например:

document.addEventListener('DOMContentLoaded', function() {

  function loadScript(src) {
    let script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.getElementsByTagName('body')[0].appendChild(script);
  }

  loadScript('https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js');
  loadScript('/myscript1.js');
  loadScript('/myscript2.js');  

});