Question

在我的HTML页面上，我可以通过以下方式加载JS文件：

<script id="jjquery"></script>
<script id="jscookie"></script>
<script id="winx"></script>

<script>
(function(){
  if(screen.width > 479) 
    document.querySelector("#jjquery").setAttribute("src", "/js/jquery-3.3.1.min.js");
    document.querySelector("#jscookie").setAttribute("src", "/js/jscookie.js");
    document.querySelector("#winx").setAttribute("src", "/js/winx.js");
}());
</script>

基本上，我使用in this answer描述的方式仅从特定的屏幕分辨率开始加载某些脚本。但是，依赖于jquery的三个脚本中的第三个不起作用，并显示$ is not defined。即使我在控制台中输入$，它也会返回正常响应。而且，当我在HTML输出中看到脚本的顺序时，很显然jquery在其他两个脚本之前被加载。这里可能是什么问题？

P.S。如果我只在不进行分辨率检查的情况下正常加载脚本，一切都可以正常工作。

Answer 1

问题在于脚本是异步加载的，因此代码的顺序无关紧要。

您可以看到MDN example，了解如何正确导入脚本。

在您的情况下，如果某些脚本依赖于jquery，则可以创建一个onLoadJquery函数并将其附加为脚本的onload属性，此函数将在导入后执行。

<script>
(function(){
  if(screen.width > 479) { 
    // add the callback that will be executed once jquery is loaded
    document.querySelector("#jjquery").addEventListener("load", onLoadJquery);
    document.querySelector("#jjquery").setAttribute("src", "/js/jquery-3.3.1.min.js");
    document.querySelector("#jscookie").setAttribute("src", "/js/jscookie.js");

  }

  function onLoadJquery() {
    // safely import the rest of the scripts
    document.querySelector("#winx").setAttribute("src", "/js/winx.js");
  }
}());
</script>

jQuery在依赖于jquery的脚本之前加载，但后者仍显示“未定义$”

1 个答案: