image.service setup for IntersectionObserver

image.service.ts

const INTERSECT_PAGESIZE = 2;

@Injectable()
export class ImageService {

  list: any[] = [];

  intersectionObserver: IntersectionObserver;
  intersectionRatio: number;
  elementToObserve: Element;
  private _indexToObserve: number; // only to grow from 0 as scrolling down
  get indexToObserve() { return this._indexToObserve; }
  set indexToObserve(value) {
    const len = this.list.length;
    if (!value || value <= this._indexToObserve || value >= len) {
      return;
    }

    this._indexToObserve = value;

    // update 'toLoad' to load more images
    for (let i = 0; i < INTERSECT_PAGESIZE; i++) {
      const index = this._indexToObserve + i;
      if (index === len) { return };
      this.list[index].toLoad = true;
    }
  }

  constructor(private http: Http) {
    try {
      this.intersectionObserver = new IntersectionObserver(entries => {
        const entry = entries[0];
        const currentRatio = this.intersectionRatio;
        const newRatio = entry.intersectionRatio;
        const boundingClientRect = entry.boundingClientRect;
        const scrollingDown = currentRatio !== undefined && newRatio < currentRatio &&
          boundingClientRect.bottom < boundingClientRect.height;

        this.intersectionRatio = newRatio;

        if (scrollingDown) {
          const i = this.indexToObserve + INTERSECT_PAGESIZE;
          this.unobserve();
          this.indexToObserve = i;
          console.info(`${currentRatio} -> ${newRatio} [${i}]`);
        }
      }, { threshold: [ 0, 0.25, 0.5, 0.75, 1 ]});
    } catch (e) {
      console.error(`failed to create IntersectionObserver:`, e);
    }
  }