In Meteor JS, how to control Javascript load order in relation to DOM load order? For animations

Question

I have a template that I downloaded:

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

I want to use it in Meteor, and I'm having serious problems with

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

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

initNavbar(); initPortfolio(); initAnimations(); initTwitterFeed();

I have all the css, fonts, images and js files in my folder public, and all of them are correctly specified in HTML. They are not in the directory libthat loads before everything else.

I think because the script somehow loads before the DOM loads, so it does not have a DOM to apply it.

What I tried:

• script.js main.js 444 <script src="assets/js/main.js"></script>, .

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

/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.startup, , . .

:

, , . - . , :

Lib

, , lib , .

. *

, . * , .

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({