intersection-observer/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
  <title>in60: Intersection Observer</title>
  <style>

    html {
      margin: 0;
      padding: 0;
      background: #f4f4f4;
    }

    body {
      margin: 21px;
    }

    .placeholder {
      margin: 0 auto 21px;
      max-width: 600px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.2);
      background: #fff;
    }

    .placeholder > .inner {
      position: relative;
      padding-bottom: 50%;
    }

    .placeholder > .inner > img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
    }

    .placeholder > .inner > img.loaded {
      animation: fade-in 2000ms both;
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

  </style>
</head>
<body>

<script>
  (function() {
    var els = render(50);

    // create an observer
    var observer = new IntersectionObserver(onChange, {
      // rootMargin: '50% 0%'
      threshold: [0.5]
    });

    // observe all the placeholder elements
    els.forEach(el => observer.observe(el));

    function onChange(changes) {
      changes.forEach(change => {
        var el = change.target;
        var image = document.createElement('img');

        image.src = el.dataset.src;
        el.firstChild.appendChild(image);
        observer.unobserve(el);

        image.onload = () => image.classList.add('loaded');
      });
    }

    function render(count) {
      var result = [];

      while (count--) {
        var el = document.createElement('div');
        var inner = document.createElement('div');
        var random = Math.floor(Math.random() * 10) + 1;
        el.className = 'placeholder';
        el.dataset.src = `images/${random}.jpeg` ;
        inner.className = 'inner';
        el.appendChild(inner);
        document.body.appendChild(el);
        result.push(el);
      }

      return result;
    }

  })();
</script>
</body>
</html>