具有defer属性的脚本按指定的顺序加载，但不是在加载文档本身之前。由于defer对script标签没有影响，除非它们也具有该src属性，因此第一个执行的脚本是您的内联脚本。所以当时 jQuery 还没有加载。

您至少可以通过两种方式解决此问题：

• 将您的内联脚本放在一个.js文件中，并使用一个src属性（除了defer您已经拥有的属性之外）引用它，或者

• 让您的内联脚本等待文档和延迟脚本被加载。该DOMContentLoaded事件将在发生时触发：

  <script>
      window.addEventListener('DOMContentLoaded', function() {
          (function($) {
              //do something with b-lazy plugin, lightbox plugin and then with flexslider
          })(jQuery);
      });
  </script>
  

注意：请注意，在后一种情况下$(document).ready(function()不再包含在内，因为它会等待相同的事件 ( DOMContentLoaded)。您可能还包括像您在最初的代码有，但随后的jQuery只会执行回调马上，这使得没有实际的区别。

您可以从脚本中创建一个 Base64 URL 并将其放入 src 中！

<script src="data:text/javascript;base64,YWxlcnQoJ0hlbGxvIHdvcmxkIScpOw=="
        defer>
</script>

我建立了一个快速测试来查看它的运行情况。Hello world!如果defer工作正常，您应该看到带有last的警报：

<script defer>
  alert('Why no defer?!?');
</script>

<!-- alert('Hello world!'); -->
<script src="data:text/javascript;base64,YWxlcnQoJ0hlbGxvIHdvcmxkIScpOw=="
        defer></script>

<script>
  alert('Buh-bye world!');
</script>

手动完成它有点费力，因此如果您有幸以某种方式（Handlebars、Angular 等）编译 HTML，那么这将有很大帮助。

我目前正在使用：

<script src="data:text/javascript;base64,{{base64 "alert('Hello world!');"}}"
        defer>
</script>

来自 MDN 文档：

defer
这个布尔属性设置为向浏览器指示脚本将在文档被解析之后执行，但在触发之前执行DOMContentLoaded。defer 属性只能用于外部脚本。

这称为 IIFE （立即调用的函数表达式），它在 DOM 可用之前执行。因此，在这种情况下jQuery是未定义的，因为它不在 DOM 中。

使用纯文本数据 URI 延迟加载 - Chrome 和 FF

#noLib #vanillaJS

建议不要在跨浏览器生产中使用

直到 MS IE 消亡，MS Edge 将采用 Chromium 开源；)

延迟脚本的唯一方法是外部文件或Data_URI（不使用事件 DOMContentLoaded）

推迟

spec script#attr-defer（MDN 网络文档）：“如果 src 属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下它将不起作用。）”

数据_URI

规格数据_URI

使用正确的类型“text/javascript”根本不需要base64 ...;)

使用纯文本，因此您可以使用简单的：

<script defer src="data:text/javascript,

//do something with b-lazy plugin, lightbox plugin and then with flexslider

lightbox.option({
  resizeDuration: 200,
  wrapAround: true
})

">

是的，这有点奇怪，但<script type="module">默认情况下被推迟，没有其他选项可以按确切顺序混合以下内容：

• module外部文件 -默认延迟
• module内联脚本 -默认延迟
• 外部文件 -可选择延迟
• 内联脚本 - 只有这个hack - 据我所知（没有库/框架）

延迟/异步脚本标签不够好

有一个常识，您应该使用<script src=".." async defer>（或script.async = true在分配之前设置src，当您从 JS 执行时）和/或将您的脚本放在页面的最底部，以便尽可能多地加载和呈现页面用户，尽快。

defer.js（注意：我是这个脚本的作者）是用纯 JavaScript 编写的，这使得延迟加载其他内容更加快速和高效。您可以有效地延迟任何 javascript 文件以及内联脚本块。

如果您的页面只是使用一些 JavaScript 增强的 HTML 页面，那么您只需使用<script async>. 浏览器解析和执行这些脚本需要时间，每次UI变化都可能重排你的布局，让你的加载速度变慢，没有人喜欢盯着一个空白的页面；用户不耐烦，很快就会离开。

在各种情况下，使用async或defer不提供比defer.js更快的页面速度。