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

问题描述

我下载了一个模板:

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();初始化动画()；initTwitterFeed();

我的 public 文件夹中有所有的 css、字体、图像和 js 文件，并且它们都在 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();初始化动画()；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屋！