Question

有人可以帮我解决一个问题吗？

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

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

我探索了这个问题并得到了一些有用的方法。例如，设置＆＃34; async＆＃34;到＆＃34;假＆＃34;。但我仍然无法以某种方式解决这个问题。

这是我尝试动态加载脚本和样式的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);
}

在这个例子中＆＃34; script1.js＆＃34;和＆＃34; style1.css＆＃34;比其他脚本和样式大得多。有时＆＃34; style1.css＆＃34;开始加载虽然＆＃34; script1.js＆＃34;还没有加载。它会导致异常和其他问题。

请看一下，告诉我这段代码有什么问题？什么是正确的？谢谢你的关注。

Answer 1

尝试使用jQuery：

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

适合我：）

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

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

1 个答案: