在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，fonts，images和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的承诺中运行它们。 这是你的情况：

$.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

在如上所述排序之后，名为lib的目录下的所有文件都在其他所有文件之前被移动，从而保留它们的顺序。

主要。*

所有匹配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({