如何在异步加载清单文件后加载页面JavaScript

Question

我正在尝试使用异步JavaScript加载将我的应用程序转换为：

<%= javascript_include_tag "application", async: true %>

问题在于任何特定于页面的脚本都在异步加载Jquery之前运行。如何将它们推迟到加载application.js清单文件后再运行。

我尝试将页面js包装在$(window).load(function(){});中，但这没有起作用。我仍然看到以下错误：

Uncaught ReferenceError: $ is not defined

更新：

这对我来说似乎是有效的，但我希望有人能确认它是否是正确的方法：

<%= javascript_include_tag "application", async: true, onload: 'pageScripts()' %>

然后页面脚本如下：

<script>
  function pageScripts() {
    // do something
  }
</script>

- Abram

---

为什么不直接在 window.onload 作用域内编写您的 JavaScript 呢？ - jayant

Answer 1

你的方法是正确的，不过我建议只在生产环境中限制异步加载，因为在开发环境中，Sprockets尚未将所有文件连接起来。

<%= javascript_include_tag "application", async: Rails.env.production?, onload: 'pageScripts()' %>

- svelandiag

---

谢谢，因为你回复了我所以我会给你打赏。顺便说一下，你可以在development.rb文件中加入config.assets.debug = false来测试这个功能，这会强制使用开发模式下的清单文件，但通常更好的做法是像你建议的那样使用async: Rails.env.production?。谢谢。 - Abram

":async => true和async: Rails.env.production之间有什么区别？" - Kick Buttowski

区别在于 :async => true 时总是异步的，但是当 async: Rails.env.production? 时，只有在生产环境下才会异步。 - svelandiag