时间戳

首页 > 解决方案 > jquery 在依赖 jquery 的脚本之前加载，但后者仍然说“$ 未定义”

javascript - jquery 在依赖 jquery 的脚本之前加载，但后者仍然说“$ 未定义”

问题描述

在我的 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>

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

PS如果我只是正常加载脚本而不进行分辨率检查，一切都可以正常工作。

标签： javascriptjquery

解决方案

问题是脚本是异步加载的，因此代码的顺序不相关。

您可以查看MDN 示例，了解如何正确导入脚本。

在您的情况下，如果您的某些脚本依赖于 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>

推荐阅读