src/static/lazy-loading.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

/* eslint-env browser */

// Lazy loading! Roll your own. Woot.
// This file includes a 8unch of fall8acks and stuff like that, and is written
// with fairly Olden JavaScript(TM), so as to work on pretty much any 8rowser
// with JS ena8led. (If it's disa8led, there are gener8ted <noscript> tags to
// work there.)

var observer;

function loadImage(image) {
  image.src = image.dataset.original;
}

function lazyLoad(elements) {
  for (var i = 0; i < elements.length; i++) {
    var item = elements[i];
    if (item.intersectionRatio > 0) {
      observer.unobserve(item.target);
      loadImage(item.target);
    }
  }
}

function lazyLoadMain() {
  // This is a live HTMLCollection! We can't iter8te over it normally 'cuz
  // we'd 8e mutating its value just 8y interacting with the DOM elements it
  // contains. A while loop works just fine, even though you'd think reading
  // over this code that this would 8e an infinitely hanging loop. It isn't!
  var elements = document.getElementsByClassName('js-hide');
  while (elements.length) {
    elements[0].classList.remove('js-hide');
  }

  var lazyElements = document.getElementsByClassName('lazy');
  var i;
  if (window.IntersectionObserver) {
    observer = new IntersectionObserver(lazyLoad, {
      rootMargin: '200px',
      threshold: 0,
    });
    for (i = 0; i < lazyElements.length; i++) {
      observer.observe(lazyElements[i]);
    }
  } else {
    for (i = 0; i < lazyElements.length; i++) {
      var element = lazyElements[i];
      var original = element.getAttribute('data-original');
      element.setAttribute('src', original);
    }
  }
}

document.addEventListener('DOMContentLoaded', lazyLoadMain);