title: In Meteor, is there a way to detect when data is fully loaded to the browser?
body: <p>This problem probably has been asked before, but I cannot seem to figure out an easy way to do it.</p>
  
  <p>I have a Meteor page that shows messages posted by users in chronological order (newest message at the bottom).  I want the page to:</p>
  
  <p>#1) Subscribe to the messages (using publish/subscribe) based on a parameter supplied in the URL</p>
  
  <p>#2) Render the page</p>
  
  <p>#3) Display the messages on the page</p>
  
  <p>#4) Scroll to the bottom.</p>
  
  <p>There's no apparent way to know when 1, 2, and 3 are complete before initiating the scroll to bottom.  Meteor does have an observe/added function to do an event when new messages are added to a subscription, however that's only when documents are insertted into Mongo, and it does not trigger when displaying results to the initial subscription.</p>
  
  <p>I'll show code for the steps above:</p>
  
  <p>#1: Subscribe to the messages using publish/subscribe: in /client/messages.js</p>
  
  <pre><code>Template.messages.created = function() {
    this.autorun( function() {
      this.subscription = Meteor.subscribe("messages", Router.current().params.category);
    }.bind(this));
  };
  </code></pre>
  
  <p>#2 Render the page, in /client/messages.html</p>
  
  <pre><code>&lt;template name="messages"&gt;
    {{#each messages}}
      {{messageText}}&lt;br&gt;&lt;br&gt;
    {{/each}}
  &lt;/template&gt;
  </code></pre>
  
  <p>#3: Display the mssages on the page: /client/messages.js</p>
  
  <pre><code>Template.messages.helpers({
    messages: function() {
      var category = Router.current().params.category;
      return Messages.find({category: category}, { sort: { messageDate: 1 } });
    },
  });
  </code></pre>
  
  <p>All this works, but does not automatically scroll to the bottom.</p>
  
  <p>I cannot add a jquery scroll command to the Meteor onRendered section because it runs BEFORE the data is written to the DOM.  I can do a Meteor.setTimeout to wait 1 second before scrolling to the bottom, but does not work if it takes longer than a second to fill the DOM with subscribed data.</p>
  
  <p>Here's another thing complicating the matter.  I am supplying the <em>category</em> variable in the URL.  When the client selects another category, using Meteor/Blaze pathFor, </p>
  
  <pre><code>{{pathFor 'messages' channelid='new'}}
  </code></pre>
  
  <p>the browser does not reload/rerender the page, it simply updates the URL parameter which triggers the autorun to change what <em>messages</em> it has subscribed to.  It simply writes the new data to the DOM.  Because of this, I cannot to a jquery $(document).ready to detect whether the page is ready (because the page is always ready), and I cannot use some fancy handlebars thing like {{scrollToBottom}} at the end of my {{#each}} in messages.html because that it not re-run.</p>
  
  <p>So, is there a simple way to detect when Meteor/Blaze completely finishes writing new data to the browser?</p>