bob-lee

  if ('NodeList' in window && !NodeList.prototype.forEach) {
    console.info('polyfill for IE11');
    NodeList.prototype.forEach = function (callback, thisArg) {
      thisArg = thisArg || window;
      for (var i = 0; i < this.length; i++) {
        callback.call(thisArg, this[i], i, this);
      }
    };
  }

bob-lee

  <div id="images" class="images">

    {{#each images}}
      <div class="image" data-idx="{{@index}}">
        <picture>
          <img data-idx="{{@index}}" data-src="{{imageSrc this}}" class="image1" alt="{{this.fileName}}">
        </picture>
      </div>
    {{/each}}

bob-lee

  const INTERSECT_PAGESIZE = 2;
  const list = document.querySelectorAll('img.image1');
 
  let intersectionObserver; // instance of observer
  let intersectionRatio; // 1: fully shown, 0.5: half shown, ...
  let elementToObserve; // img tag being observed
  let _indexToObserve; // index of img tag being observed
 
  Object.defineProperty(this, "indexToObserve", {
    get: function () { return _indexToObserve; },

bob-lee

    intersectionObserver = new IntersectionObserver(function(entries) {
      const entry = entries[0]; // observe one element
      const currentRatio = intersectionRatio;
      const newRatio = entry.intersectionRatio;
      const boundingClientRect = entry.boundingClientRect;
      const scrollingDown = currentRatio !== undefined && newRatio < currentRatio &&
        boundingClientRect.bottom < boundingClientRect.height;
 
      intersectionRatio = newRatio;
 

bob-lee

  // register 'load' event handlers
  list.forEach(function(img) { 
    img.addEventListener('load', function() {
      observe(img);
    });
  });

  // Now all set up, let's start loading first two images
  indexToObserve = 0;

bob-lee

  function observe(me) { // observe new element, me
    if (!me) {
      return;
    }
 
    const index = me.getAttribute('data-idx');
 
    if (index == indexToObserve) {
      elementToObserve = me;
      intersectionObserver.observe(me);

bob-lee

      <img [src]="(image.toLoad && image.url) || ''" 
        (load)="loaded(image)"
        class="image1" alt="{{image.fileName}}">

bob-lee

const INTERSECT_PAGESIZE = 2;

@Injectable()
export class ImageService {

  list: any[] = [];

  intersectionObserver: IntersectionObserver;
  intersectionRatio: number;
  elementToObserve: Element;

bob-lee

    return this.http.get(`${API}/${path}`).toPromise().then((snapshot) => {
      this.list = [];

      // prepare a list for intersection observer
      this._indexToObserve = 0;
      const items = snapshot.json();
      this.list = items.reverse().map((item, index) => {
        /* provide 2 additional properties for each image:
              toLoad: boolean, the component to load image,
              index: number, the component to call observe(item) on image loaded

bob-lee

import React from 'react';
import getUrls from './api'

const INTERSECT_PAGESIZE = 2;

export default class Observer extends React.Component {
  state = { list: [] }
  intersectionRatio = null; // 1: fully shown, 0.5: half shown, ..
  elementToObserve = null; // img tag being obseved
  _indexToObserve = null; // index of img tag being obseved