IntersectionObserver setup 1

intersection-observer-setup-1.js

  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; },
    set: function (value) {
      
      const len = list.length;
 
      if (_indexToObserve && (!value || value <= _indexToObserve || value >= len)) {
        console.error('indexToObserve', value);
        return;
      }
 
      _indexToObserve = value;
 
      // load more images
      for (let i = 0; i < INTERSECT_PAGESIZE; i++) {
        const index = _indexToObserve + i;
        if (index === len) { 
          return // reached page end 
        }

        // set 'src' to load image
        const img = list[index];
        img.setAttribute('src', img.getAttribute('data-src'));

        console.log('[' + index + ']');
      }
    }
  });