Харесва ми как уебсайтове като Bitbucket използват контейнери за съдържание, за да структурират уебсайта си, докато съдържанието се зарежда. Харесва ми и идеята за мързеливо зареждане, докато превъртате, известно още като безкраен скролер. Мислех, че ще комбинирам контейнери за съдържание и безкрайни скролери, използвайки Angular и Rxjs.
Ако все още не сте виждали контейнери за съдържание, това е, за което говоря:
Като добавим към концепцията за безкрайно превъртане, искам да зареждам съдържание само когато потребителят спре, за да предотвратя ненужно зареждане, когато потребителят превърта надолу до определена точка. Видеото по-долу демонстрира очаквания резултат.
И така, какво става тук? Ще се опитам да обясня с малко графики.
- Компонентът се абонира за ViewportService. ViewportService ще уведоми компонента, когато е видим на екрана и е готов за зареждане.
- Добавяме директивата ViewportElement към нашия компонент.
- Целта на директивата ViewportElement е да слуша събитието за превъртане и да проверява видимостта на компонента. Ако компонентът е видим, той ще уведоми ViewportService.
Можете да намерите работещ пример тук
