乱序运行 <script> 部分答案

【问题标题】：Run <script> Sections Out of Order乱序运行 <script> 部分
【发布时间】：2014-07-17 21:23:44
【问题描述】：

我正在使用 HTML 模板 (Jekyll)，偶尔想在模板的内容中包含脚本。比如我的页面模板是这样的

<body>
  {{ content }}
  <script src="some_library.js"></script>
  <script>
    // general setup stuff
  </script>
</body>

{{ content }} 有时可以包含在哪里

<script>
  // page-specific code relying on some_library.js and general page setup stuff
</script>

我可以将模板脚本移动到模板的头部，但我已经多次阅读过将<script> 放在文档末尾的重要性。我能否可靠地确保特定于页面的代码在最先出现的情况下最后运行？

我正在使用 jQuery，但如果我在模板中包含 jQuery，那么它在内容脚本中将不可用。我尝试在内容脚本周围添加$(window).load 函数，但得到$ is not defined。

【问题讨论】：

【解决方案1】：

您可以直接使用窗口加载事件而不是 $(window).load - 不需要 jQuery！

最简单的方法：

window.onload= yourFunction;

A cleaner way 将依赖 attachEvent/addEventListener 方法：

window.addEventListener ? 
window.addEventListener("load",yourFunction,false) : 
window.attachEvent && window.attachEvent("onload",yourFunction);

（attachEvent 适用于旧版 IE）

【讨论】：

【解决方案2】：

使用 jQuery 的.ready() function。

来自文档：

虽然 JavaScript 提供了用于执行代码的加载事件，但当页面被渲染，直到所有资产都不会触发此事件如图片已完全接收。

也来自文档：

$(function() {
    // Handler for .ready() called.
});

【讨论】：