CODEWITHSUNDEEP
dommeteor
fuzzybabybunny
fuzzybabybunny

Reputation: 5254

Meteor.startup(func) - when is the DOM "ready" in Meteor?

http://docs.meteor.com/#meteor_startup

Concerning Meteor.startup(func)

On a client, the function will run as soon as the DOM is ready.

At what point is the "DOM ready"?

The reason why I ask is because you can have a Meteor template that uses many other templates (ie. other DOM elements) inside of it and have many other things loading at different times depending on how long those things take to load (ie. more DOM elements).

In the past I've loaded Javascript files on Meteor.startup but they were still loaded too early because the entire DOM actually had not been loaded yet.

Meteor.startup( function() {

  //load JS files now

});

So what does it mean by "DOM ready?" It most definitely does not mean "When the DOM is loaded in its entirety."

Upvotes: 2

Views: 1808

Answers (2)

Tarang
Tarang

Reputation: 75955

Meteor.startup actually runs when all the files have completely downloaded from the server (javascript files). If you place your code to run at startup without putting it in a Meteor.startup it may not run because it would run where the JS/html has not been fully downloaded yet

This is when the 'DOM is ready', but not necessarily when your HTML is rendered, because this (the HTML) renders when the DOM is ready too.

If you're looking for something that runs after both the DOM is ready and after your page's html is ready look for the template's .rendered callback - http://docs.meteor.com/#template_rendered

The confusion may come from the concept of $(document).ready in JQuery, but this applies because the page is already rendered on the server side so you can assume its also rendered on the client (since its downloaded that way). In Meteor pages are rendered on the client so there is this slight difference.

Upvotes: 2

dgtlife
dgtlife

Reputation: 106

Here's what the .startup method actually does on the client:

Meteor.startup = function (cb) {
  var doScroll = !document.addEventListener &&
    document.documentElement.doScroll;

  if (!doScroll || window !== top) {
    if (loaded)
      cb();
    else
      queue.push(cb);
  } else {
    try { doScroll('left'); }
    catch (e) {
      setTimeout(function() { Meteor.startup(cb); }, 50);
      return;
    };
    cb();
  }
};

Upvotes: 1

Related Questions