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

请注意，动态脚本默认情况下的行为为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);

});

如果您想使事情保持干燥（不要重复自己），则可以使用以下帮助函数：

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');  

});

在DOMContentLoaded之后先加载jQuery

1 个答案: