-1

The webpage that I want to create must have a lot of blocks (angular2 components). So I want to initialize only couple of them (which would be visible from the beginning) and others would be initialized later (for example when user scrolls, so I will save call by network which loads data and the rendering of the page would be much faster).

It is something like AMP (I know that AMP and Angular2 are totally different). For example on page https://www.bucketlist127.com/blog/ideas-for-bucket-list images are being loaded when user scrolls the page which makes the page much smaller (very important for mobile devices).

I tried to catch an event when the component becomes visible, but seems there is not a angular2 native event for this (ngOnInit, ngOnDestroy, ngDoCheck, ngOnChanges, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked)

The question is: is there any good practice for this?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Vazgen Manukyan
  • 1,410
  • 1
  • 12
  • 17
  • How you are hiding component ? if you have used `ngIf` then you can use `ngOnInit` when component become visible – ranakrunal9 Dec 08 '16 at 10:56
  • Is this about components being scrolled into visible area? – Günter Zöchbauer Dec 08 '16 at 12:20
  • suppose I have 10 instances of a component, and each one makes different request to the server, load images and west some processor time which slow down the rendering of the page. Let's say a user opens the page and only 3 components are visible. So the question is how to save time of other 7 components (by not making requests, by not spending tine on rendering, ...) – Vazgen Manukyan Dec 08 '16 at 13:49
  • The final purpose is the render the page as fast as possible. AMP does it, but it is not useful for dynamic pages. Also for overloaded servers it would decrease the overloading – Vazgen Manukyan Dec 08 '16 at 13:51
  • check IntersectionObserver API for this . https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API – Amit Gaikwad Feb 08 '18 at 09:34

1 Answers1

0

I'd say after the onOnInit , if you listen to any event after that , like ngAfterViewInit and ... , you can be sure that your view is visible , unless there is something preventing it , like a css class or whatever.

Milad
  • 27,506
  • 11
  • 76
  • 85