Best way to detect if component is rendered and visible on screen?

1

What’s the best way to do this? I’ve tried ember-inviewport and also waypoints but neither seems to do what I need…

I also tried this mixin:

https://medium.com/delightful-ui-for-ember-apps/ember-js-detecting-if-a-dom-element-is-in-the-viewport-eafcc77a6f86

but it just seems to fire off as soon as the page is loaded - even for the components that aren’t visible.

Cheers

w

2

If I understood you correctly, then didRender() hook is what you are looking for.

Use it like this in your component:

export default Ember.Component.extend({
  didRender: function() {
    console.log('component has rendered!');
  }
});
3

Maybe use this instead of the code in the blog post, as I think that was the original implementation that likely has not been updated to track ember changes.

4

I did try that. I’ll give it another spin in the morning. Maybe I missed something :confused:

5

Had another knock at this this morning and it’s working great :smile:

http://test.sonatribe.com/event/firefly-music-festival-2015?term=

6

You can use a combination of the Page Visibility API, with this._state === "inDOM" + getBoundingClientRect()` to decide if the component is visible, rendered and inside screen.