在Meteor JS中，如何控制与DOM加载顺序相关的Javascript加载顺序？对于动画 [英] In Meteor JS, how to control Javascript load order in relation to DOM load order? For animations

问题描述

我有一个我下载的模板：

I've got a template that I downloaded:

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

我想在Meteor中使用它并且我遇到了重大问题

I want to use it in Meteor and I'm having major issues with

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

第444行底部的

未按正确的顺序加载。页面加载时，此js文件中指定的4个函数都不起作用。

at the bottom on line 444 not loading in the right order. When the page loads, none of the 4 functions specified in this js file work.

initNavbar（）;
initPortfolio（）;
initAnimations（）;
initTwitterFeed（）;

我的 public 文件夹，它们都在HTML中正确引用。它们在 lib 目录中不，在其他所有目录之前加载。

I have all the css, fonts, images, and js files in my public folder and they are all correctly referenced in the HTML. They are not in the lib directory which loads before everything else.

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

I think it's because the script is somehow loading before the DOM is loaded, so it has no DOM to apply things to.

我尝试过的东西：

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

• When I change the name of script.js to main.js and change line 444 to <script src="assets/js/main.js"></script> the animations still don't work.

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

When I add this into the script file it still doesn't load correctly:

$（document）.ready（function（）{
initNavbar（）;
initPortfolio（）;
initAnimations（）;
initTwitterFeed（）;
}）;

我能做到

Template.layout.rendered / created = function（）{添加所有功能代码并在此处调用}

但是这似乎是一种令人难以置信的，令人难以置信的混乱和低效的方式。我需要指定单个文件的加载顺序，而不是代码。我在这个模板中有大约五个.js文件，我不想删除他们的代码并将其全部粘贴到一个 Template.layout.rendered / created 函数中。

but this seems like an uncredibly, INCREDIBLY messy and inefficient way to do this. I need to specify the load order of individual files, not code. I have around five .js files in this template and I don't want to have to cut out their code and paste it all into one Template.layout.rendered/created function.

推荐答案

上述答案都不适合我，所以我保留了黑客攻击直到最后工作：

None of the above answers worked for me, so I kept hacking away until finally the following worked:

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文件中。

I put this in my layout.js file.

这篇关于在Meteor JS中，如何控制与DOM加载顺序相关的Javascript加载顺序？对于动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！