javascript - 无法正确地动态加载脚本和样式

Question

有谁能帮我解决一个问题吗？

我正在制作一些 javascript。在这个脚本中，我需要动态加载一些其他脚本和样式。我的脚本逻辑要求，所有这些脚本和样式都必须按某种顺序加载，并且只有在所有这些脚本和样式都加载时 - 之后才会执行一些脚本代码。

问题是我无法实现所有脚本和样式都以正确的顺序动态加载。不是每次都这样，但有时我会看到某些脚本或样式尚未加载，但下一个脚本已在尝试加载。

我探索了这个用法并得到了一些有用的方法。例如，将“async”设置为“false”。 但我仍然无法以某种方式解决这个问题。

这是我尝试动态加载脚本和样式的 js 部分。

function loadScripts() {
  var fileref;

  fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "script1.js");
  fileref.async = false;
  document.getElementsByTagName("head")[0].appendChild(fileref);

  fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", "style1.css");
  fileref.async = false;
  document.getElementsByTagName("head")[0].appendChild(fileref);

  fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", "style2.css");
  fileref.async = false;
  document.getElementsByTagName("head")[0].appendChild(fileref);

  fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "script2.js");
  fileref.async = false;
  document.getElementsByTagName("head")[0].appendChild(fileref);
}    

在此示例中，“script1.js”和“style1.css”比其他脚本和样式大得多。有时“style1.css”开始加载，但“script1.js”尚未加载。它会导致异常和其他问题。

请看看并告诉我这段代码有什么问题？什么是正确的？ 感谢您的关注。

Answer 1

用 jQuery 试试这个:

//Add Css File
$("head").append($('<link rel="stylesheet" type="text/css" />').attr('href', 'my.css'));

对我有用:)

对于更复杂的加载，我建议 require.js