Using the intersection observer with Elm

lazy-loading.js

function onEntry(entry) {

  entry.forEach((change) => {

    if(change.isIntersecting) {

      change.target.classList.add('visible');
    }
    
  });
  
}

const intersect = () => {

  let options = {
    threshold: [1]
  };

  let observer = new IntersectionObserver(onEntry, options);

  let elements = document.getElementsByClassName('lazy');

  for (let elm of elements) {
    observer.observe(elm);
  }
}


(function() {

  window.addEventListener("load", intersect);

	if (window.history && window.history.pushState) {

		window.addEventListener('popstate', function() {

      window.setTimeout(intersect, 100);

		});
    
	}
  
})();

ports.urlChange.subscribe(url => {
  intersect();
})