javascript - 在 Meteor JS 中，如何控制与 DOM 加载顺序相关的 Javascript 加载顺序？对于动画

Question

我下载了一个模板:

http://halibegic.com/projects/merlin/

我想在 Meteor 中使用它，但我遇到了一些重大问题

<script src="assets/js/script.js"></script>

第 444 行底部的加载顺序不正确。当页面加载时，此 js 文件中指定的 4 个函数均不起作用。

initNavbar();
initPortfolio();
initAnimations();
initTwitterFeed();

我的 public 中有所有的 css、字体、图像和 js 文件文件夹，它们都在 HTML 中正确引用。他们不在lib在其他所有内容之前加载的目录。

我认为这是因为脚本在 DOM 加载之前以某种方式加载，所以它没有 DOM 可以应用东西。

我尝试过的事情:

• 当我更改 script.js 的名称时至 main.js并将第 444 行更改为 <script src="assets/js/main.js"></script>动画仍然不起作用。

• 当我将其添加到脚本文件中时，它仍然无法正确加载:

  $(document).ready(function () {
initNavbar();
initPortfolio();
initAnimations();
initTwitterFeed();
});

• 我能行

  Template.layout.rendered/created = function () { add in all the function code and call them here }

  但这似乎是一种令人难以置信的、令人难以置信的困惑和低效的方法。我需要指定单个文件 的加载顺序，而不是代码。我在这个模板中有大约五个 .js 文件，我不想剪掉它们的代码并将它们全部粘贴到一个中 Template.layout.rendered/created功能。

Answer 1

您需要做的就是在呈现模板后加载 javascript。

Template.yourLayout.created = function() {
  $('head').append('<script type="text/javascript" src="assets/js/script.js">');
}

如果您在 $(window).load() 或 $(document).ready() 中加载了脚本，请记住也将其取出。您也可以在 $getScript 的 promise 中运行它们。这是你的情况:

$.getScript('assets/js/script.js', function() {
      initNavbar();
      initPortfolio();
      initAnimations();
      initTwitterFeed();
      $(".loader .fading-line").fadeOut();
      $(".loader").fadeOut("slow");
});