javascript - 如何强制 jQuery 首先加载？

Question

我正在尝试将 bootstrap-select 添加到我的 Flask 应用程序中，但一直遇到错误“TypeError: $(...).selectpicker 不是函数”。我读到的所有内容都表明，只有在加载 bootstrap-select.js 之后再次加载 jQuery 时才会发生这种情况，因此我检查并清理了我的脚本，确保 jQuery 在我所有其他 JS 脚本之前加载，如下所示:

<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

但是，我仍然遇到同样的问题。我决定看一下 chrome 开发者工具窗口中的加载顺序，现在我认为我的问题是这样的:jQuery 在 bootstrap-select 之前正在排队加载，但实际上并不是 em>开始下载直到 bootstrap-select 完成之后。我怀疑这是因为两者之间的尺寸差异。

有什么办法可以强制我的其他脚本延迟加载，直到 jQuery 已经加载之后？或者，如果我弄清楚如何在静态目录中缓存 jQuery 的副本，这会有帮助吗？

编辑:哇，好吧，我对此有很多评论!为了尽可能地澄清，我将做一些笔记:

• 彻底检查所有脚本后，我可以确认只加载了一份 jQuery 副本。
• 这不是 https 页面，我在 Flask 开发服务器上本地运行它。
• 我检查了代码中的 bootstrap-select url，它是正确的。抱歉，我不确定为什么在复制粘贴时遗漏了破折号。我已相应更正了问题。
• 我一直在使用 Chrome 开发工具中的“网络”选项卡来检查加载成功/次数。
• 我将 jQuery 移至文件的最开头，以确保它首先加载，现在我可以确认它在 bootstrap-select 加载之前已完成加载。

尽管如此，我仍然遇到同样的错误，所以如果有人有其他建议，我将不胜感激。我现在完全没有想法了。

Answer 1

您应该将 defer 放在两个脚本标记的末尾，这样无论如何它们都会按顺序加载，如下所示:

<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>