Should use intersection observer when possible

[tjoskar]

Listen for scroll events are expensive. Use intersection observer instead.

https://developers.google.com/web/updates/2016/04/intersectionobserver
https://wicg.github.io/IntersectionObserver/

[tjoskar]

Do something like this:

let observer;

// create a single observer for all images
function getObserver(loadImageAndSetLoadedClass, scrollTarget, offset) {
  if (observer) return observer;
  observer = new IntersectionObserver(changes => {
    changes.forEach(change => {
      loadImageAndSetLoadedClass(change.target);
      observer.unobserve(change.target);
    });
  }, {
    root: scrollTarget,
    rootMargin: offset + 'px'
  });
  return observer;
}

// For each image
getObserver(console.log.bind(console), window, 100).observe(this.elementRef);

[ghost]

The problem is it's hard to debounce the scroll with the IntersectionObserver , it's not meant to be used like that. So it's more made for sentinel elements

https://developers.google.com/web/updates/2016/04/intersectionobserver

Intersect all the things!

No! Bad developer! That’s not mindful usage of your user’s CPU cycles. Let’s think about an infinite scroller as an example: In that scenario, it is definitely advisable to add sentinels to the DOM and observe (and recycle!) those.

[tjoskar]

Yeah, you are right. We have to create a new IntersectionObserver for every image which will be much more expensive then the current solution (scroll).

Thanks for your feedback!