Performant lazy-load technique for 2017 and onward

/*Downloaded from https://www.codeseek.co/2kool2/performant-lazy-load-technique-for-2017-and-onward-XavqyY */
@media (min-width: 20em) {
  :root {
    font-size: calc(1rem + ((1vw - 0.2em) * 1));
  }
}
@media (min-width: 120em) {
  :root {
    font-size: 2em;
  }
}
body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

h1 {
  color: #fff;
  
  font-size: 1.5em;
  font-weight: 100;
  margin: 1rem;
  padding: 1rem .5rem;
  position: absolute; /* Collapses box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 2px #000, 0 1px 1px #000;
  background-color: rgba(0,0,0, .5);
/*   backdrop-filter: grayscale(1) contrast(3) blur(5px); */
}


h2  {
  margin: 2em 0 1em;
  font-size: 1.25em;
  font-weight: 100;
}

[class^="centered"] {
  color: #fff;
  background-color: rgba(0,0,0, .5);
  position: absolute; /* Collapses box */
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  text-shadow: 0 0 2px #000, 0 1px 1px #000;
  letter-spacing: 0.05em;
/*   white-space: nowrap; */
  z-index: 1;
  margin:0;
  padding: .25em .5em;
}


header,
footer,
section {
  display: block;
  position: relative;
  min-height: calc(100vw / 16 * 10);
}
footer {
  min-height: 0;
  max-width: 36em;
  margin: 0 auto;
  padding: 0 1rem;
}
.myStuff, .myStuff .details_lnk {
  background-color: #f7f7f7;
}


.hero_bg {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left;
  background-image: url(https://websemantics.uk/unsplash/duvet-days.jpg);
  background-size:cover;
/*   filter: blur(1px); */
}
 
img {
  display:block;
  max-width: 100%;
  margin:0 auto;
}

a {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  color: #fff;
  text-decoration: none;
  padding: .25em 1em;
}
.details_lnk {
  position: relative;
  padding: 0;
  text-decoration: underline;
  background-color: #fff;
  color: #000;
}

svg {
  width: .9em;
  height: .9em;
  vertical-align: text-top;
  fill: #ccc;
  margin-right:.35em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


.-js-fadeIn {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/*Downloaded from https://www.codeseek.co/2kool2/performant-lazy-load-technique-for-2017-and-onward-XavqyY */
// Dean Hume:  https://deanhume.github.io/lazy-observer-load/

// TODO: background-images

var lazy_loader = (() => {

  "use strict";
  
  const dataAttr = "data-LL-src";
  const imageLoaded = "-js-lazyImageLoaded";
  const imageFadeClass = "-js-fadeIn";

  // Get all of the images that are marked up to lazy load
  const images = document.querySelectorAll("[" + dataAttr + "]");

  const config = {
    // If the image gets within 50px in the Y axis, start the download.
    //rootMargin: '50px 0px',
    rootMargin: '-50px 0px', // 50px into viewport before loading so you can see it kick in
    threshold: 0.01
  };

  let imageCount = images.length;
  let observer;

  // If we don't have support for intersection observer, loads the images immediately
  if (!('IntersectionObserver' in window)) {

    console.log("No IntersectionObserver support");
    Array.from(images).forEach(image => preloadImage(image));

  } else {
    // It is supported, load the images
    console.log("IntersectionObserver supported");
    observer = new IntersectionObserver(onIntersection, config);
    images.forEach(image => {
      if (image.classList.contains(imageLoaded)) {
        return;
      }

      observer.observe(image);
    });
  }

  // Fetch image for given URL
  function fetchImage(url) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = url;
      image.onload = resolve;
      image.onerror = reject;
    });
  }

  // Preloads the image
  function preloadImage(image) {
    const src = image.getAttribute(dataAttr);
    if (!src) {
      return;
    }

    return fetchImage(src).then(() => {
      applyImage(image, src);
    });
  }

  // Load all of the images immediately
  function loadImagesImmediately(images) {
    Array.from(images).forEach(image => preloadImage(image));
  }

  // Disconnect the observer
  function disconnect() {
    if (!observer) {
      return;
    }

    observer.disconnect();
  }

  // On intersection
  function onIntersection(entries) {
    // Disconnect if we've already loaded all of the images
    if (imageCount === 0) {
      observer.disconnect();
    }

    // Loop through the entries
    entries.forEach(entry => {
      // Are we in viewport?
      if (entry.intersectionRatio > 0) {
        imageCount--;

        // Stop watching and load the image
        observer.unobserve(entry.target);
        preloadImage(entry.target);
      }
    });
  }

  // Apply the image
  function applyImage(img, src) {
    // Prevent this from being lazy loaded a second time.
    img.classList.add(imageLoaded);
    img.src = src;
    img.classList.add(imageFadeClass);
  }

})();