0

I'm using angular-meteor for my app and I'd like to know how can I check if the content has been loaded.

I need to wait because I need to scroll my page down. Imagine a view like Instagram in which you are displaying a list of pictures. You move to your profile and you go back to this view, so I'd need to wait to these images and scroll down to the position that I have already saved.

So far I've tried two methods:

  • AngularJS:

    angular.element(document).ready(function() { alert('loaded'); });

Problem: this is triggered after the template has been loaded, but not all content.

  • jQuery:

    $(window).load(function() { alert('loaded'); });

Problem: this is triggered just the first time well. Makes sense because it's a SPA

I know a directive may fix this problem but I have to load a lot of different images and the fix is going to be a bit dirty.

I'm trying to find another solution with Meteor but I couldn't find anything.

Dani
  • 3,128
  • 2
  • 43
  • 91
  • You're using angular. If you need this event, then you;re probably doing something wrong – Alon Eitan Jan 21 '17 at 11:07
  • I don't understand your comment, sorry. I need to do some scroll after have everything loaded – Dani Jan 21 '17 at 11:15
  • 2
    @AlonEitan "probably doing something wrong" may be correct (and that's why he's asking the question), but it's not very helpful - you could suggest a better way to do it, or provide a link to a similar question – Mikkel Jan 21 '17 at 18:57
  • @DanielRodriguez When you say "content is loaded" do you mean the data in your subscription? – Mikkel Jan 21 '17 at 18:59
  • 1
    @Mikkel Fair enough - http://stackoverflow.com/questions/30198546/how-to-detect-all-imges-loading-finished-in-angularjs – Alon Eitan Jan 21 '17 at 19:03
  • @Mikkel with content loaded I mean the whole DOM – Dani Jan 22 '17 at 00:06
  • @AlonEitan as I said, I know it would be possible with a directive but I'm going to execute the directive one time per image and I may have hundreds. I'm looking a Meteor way or maybe angular-meteor – Dani Jan 22 '17 at 00:18
  • Why do you need to know when the DOM is loaded? surely the data appears as it is retrieved, and the whole page is painted aliong the way? – Mikkel Jan 22 '17 at 00:46
  • I need to wait because I need to scroll. Imagine a view like Instagram in which you are displaying a list of pictures. Yo move to your profile and you go back, so I'd need to wait to these images and scroll to the position that I have already saved – Dani Jan 22 '17 at 01:13
  • Ok, it will help if you explain what you are trying to achieve in your question... Will this help you: https://docs.angularjs.org/api/ng/service/$anchorScroll ? – Mikkel Jan 22 '17 at 04:59
  • @Mikkel updated question. I didn't know $anchorScroll. Works like a charm, I tried it with the image's id but in terms to save this id instead the X position, I think that wouldn't possible. Probably this is more useful if the id is not dinamic – Dani Jan 22 '17 at 10:45
  • ok, I found something interesting. I'm going to try this out: http://jsfiddle.net/brentmn/CmpEt/ – Dani Jan 22 '17 at 10:52
  • I have implemented that script with $anchorScroll. Both work well together but the script is triggering once per image when I scroll 1px. The performance gets affected, so it would be even worst in a hybrid app. I'll try to find something else – Dani Jan 22 '17 at 11:31
  • @Mikkel, solution added (not the one I was looking for though) – Dani Jan 22 '17 at 22:44

1 Answers1

0

After been looking a solution with Meteor there is nothing related with this so I had to use a directive in terms to know when is DOM loaded.

Solution:

http://www.jomendez.com/2015/02/05/ng-repeat-onfinishrender-directive-angularjs/

Dani
  • 3,128
  • 2
  • 43
  • 91