Check when assets loaded

1

Is there a way to check when the dom has been completely loaded for the first time in a reactive environment? There are so many thrown errors/warnings, especially when working with jQuery to build carousels, etc. I guess I’d like to put a loading screen in front in the case I can track when all the db queries are run and all complete the first time.

Any advice would be awesome, thanks.

2

The simple answer is that you can’t. In a reactive context. new data can come along at any time and (potentially) completely change the dom.

However, there are some strategies you can adopt: In Blaze, the most important in my opinion, is to make good use of templates. A template’s onRendered will be fired as soon as all non-reactive elements have been rendered. That means using (sub)templates liberally and ensuring that jQuery plugins (for example) are only instantiated on simple templates, in which the content can be reliably determined to be ready (using subscription readiness, for example).

For example, if we have this template:

<template name="list">
  {{#if Template.subscriptionsReady}}
    {{#each listItems}}
      <div>Name: {{name}}</div>
    {{/each}}
  {{/if}}
</template>

The Template.list.onRendered will fire long before the data has appeared. Changing it to two templates:

<template name="list">
  {{#if Template.subscriptionsReady}}
    {{> showList}}
  {{/if}}
</template>

<template name="showList">
  {{#each listItems}}
    <div>Name: {{name}}</div>
  {{/each}}
</template>

Means that when the Template.showList.onRendered fires, it will have data and be ready for a jQuery plugin to see it.

3 Likes
3

This is awesome. Thanks. Is there a native way to check when all subscriptions are ready? I guess I could write a helper method to do this for me.

This is great. Thank you so much. Learning a new system is overwhelming at times.

1 Like
4

I don’t believe there’s a “quick one-liner” to check that all subscriptions are ready (but I haven’t checked atmosphere), so writing a helper may be a good way to go.

1 Like