在 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");
});

Answer 2

以上答案都不适合我，所以我一直在努力，直到最后以下方法奏效：

Template.layout.rendered = function() {
  // hack: these third party header animation scripts must be inserted at the bottom of body
  $('body').append('<script type="text/javascript" src="assets/js/classie-main.js">');
  $('body').append('<script type="text/javascript" src="assets/js/cbpAnimatedHeader.js">');
};

我把它放在我的 layout.js 文件中。

Answer 3

感谢 imslavko 的回答！

http://docs.meteor.com/#meteor_startup

在服务器上，该函数将在服务器进程完成启动后立即运行。在客户端上，该函数将在 DOM 准备好后立即运行。

所以我把它放到了我的 client/views/application/layout.js 中。它使用 jQuery $.getScript，所以你必须确保在你尝试之前加载了 jQuery：

Meteor.startup( function () {
  $.getScript("assets/js/jquery.min.js");
  $.getScript("assets/js/bootstrap.min.js");
  $.getScript("assets/js/isotope.pkgd.min.js");
  $.getScript("assets/js/imagesloaded.min.js");
  $.getScript("assets/js/jquery.scrollTo.min.js");
  $.getScript("assets/js/jquery.nav.min.js");
  $.getScript("assets/js/jquery.appear.min.js");
  $.getScript("assets/js/twitterFetcher.min.js");
  $.getScript("assets/js/script.js");
});

因此，所有这些文件现在都将在 DOM 加载后加载，因此动画可以正常工作。

Answer 4

从这里一目了然：Meteor Docs

最好以对文件加载顺序不敏感的方式编写应用程序，例如使用 Meteor.startup 或将加载顺序敏感代码移动到包中，这样可以显式控制两者它们的内容的加载顺序以及它们相对于其他包的加载顺序。但是，有时您的应用程序中的加载顺序依赖性是不可避免的。

不使用特殊文件名和目录时：

子目录中的文件在父目录中的文件之前加载，因此最深的子目录中的文件首先加载，根目录中的文件最后加载。 - 在目录中，文件按文件名的字母顺序加载。 以下是控制文件加载顺序的特殊文件和目录名称的完整列表：

库

按照上述排序后，名为 lib 的目录下的所有文件都将在其他所有文件之前移动，保持它们的顺序。

ma​​in.*

所有匹配 main.* 的文件都被移到其他所有文件之后，保持它们的顺序。

Answer 5

我用过这个模式

Template.layout.created = function() {
    var jsLibs = [
        'vendors/Flot/jquery.flot.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.time.js',
        'vendors/Flot/jquery.flot.stack.js',
        'vendors/Flot/jquery.flot.resize.js',
        'js/flot/jquery.flot.orderBars.js',
        'js/flot/curvedLines.js',
        'js/flot/date.js',
        'js/flot/jquery.flot.spline.js',
        'js/flot/curvedLines.js',

        'vendors/bootstrap/dist/js/bootstrap.min.js',
        'vendors/bootstrap/dist/js/bootstrap.min.js',
        'vendors/fastclick/lib/fastclick.js',
        'vendors/nprogress/nprogress.js',
        'vendors/Chart.js/dist/Chart.min.js',
        'vendors/bernii/gauge.js/dist/gauge.min.js',
        'vendors/bootstrap-progressbar/bootstrap-progressbar.min.js',
        'vendors/iCheck/icheck.min.js',
        'vendors/skycons/skycons.js',
        'js/maps/jquery-jvectormap-2.0.3.min.js',
        'js/moment/moment.min.js',
        'js/datepicker/daterangepicker.js',
        'build/js/custom.min.js',
        'js/maps/jquery-jvectormap-world-mill-en.js',
        'js/maps/jquery-jvectormap-us-aea-en.js',
        'js/maps/gdp-data.js'
    ];

    jsLibs.forEach((lib) => {
        $('head').append(`<script type="text/javascript" src="${lib}">`);
    });
}

然后将所有$(document).ready() 调用移至Template.layout.onRendered 并将click 事件移至Template.layout.events({