Question

我已经下载了一个模板：

我想在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({

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

5 个答案: