https://dometopia.com/app/javascript/js/echo.js

1if (!document.querySelectorAll) {
2    document.querySelectorAll = function(selector) {
3        var doc = document,
4            head = doc.documentElement.firstChild,
5            styleTag = doc.createElement('STYLE');
6        head.appendChild(styleTag);
7        doc.__qsaels = [];
8 
9        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
10        window.scrollBy(0, 0);
11 
12        return doc.__qsaels;
13    }
14}
15(function (root, factory) {
16  if (typeof define === 'function' && define.amd) {
17    define(function() {
18      return factory(root);
19    });
20  } else if (typeof exports === 'object') {
21    module.exports = factory;
22  } else {
23    root.echo = factory(root);
24  }
25})(this, function (root) {
26
27  'use strict';
28
29  var echo = {};
30
31  var callback = function () {};
32
33  var offset, poll, delay, useDebounce, unload;
34
35  var inView = function (element, view) {
36    var box = element.getBoundingClientRect();
37    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
38  };
39
40  var debounceOrThrottle = function () {
41    if(!useDebounce && !!poll) {
42      return;
43    }
44    clearTimeout(poll);
45    poll = setTimeout(function(){
46      echo.render();
47      poll = null;
48    }, delay);
49  };
50
51  echo.init = function (opts) {
52    opts = opts || {};
53    var offsetAll = opts.offset || 0;
54    var offsetVertical = opts.offsetVertical || offsetAll;
55    var offsetHorizontal = opts.offsetHorizontal || offsetAll;
56    var optionToInt = function (opt, fallback) {
57      return parseInt(opt || fallback, 10);
58    };
59    offset = {
60      t: optionToInt(opts.offsetTop, offsetVertical),
61      b: optionToInt(opts.offsetBottom, offsetVertical),
62      l: optionToInt(opts.offsetLeft, offsetHorizontal),
63      r: optionToInt(opts.offsetRight, offsetHorizontal)
64    };

65    delay = optionToInt(opts.throttle, 250);
66    useDebounce = opts.debounce !== false;
67    unload = !!opts.unload;
68    callback = opts.callback || callback;
69    echo.render();
70    if (document.addEventListener) {
71      root.addEventListener('scroll', debounceOrThrottle, false);
72      root.addEventListener('load', debounceOrThrottle, false);
73    } else {
74      root.attachEvent('onscroll', debounceOrThrottle);
75      root.attachEvent('onload', debounceOrThrottle);
76    }
77  };
78
79  echo.render = function () {
80    var nodes = document.querySelectorAll('img[data-echo]');
81    var length = nodes.length;
82    var src, elem;
83    var view = {
84      l: 0 - offset.l,
85      t: 0 - offset.t,
86      b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
87      r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
88    };
89    for (var i = 0; i < length; i++) {
90      elem = nodes[i];
91      if (inView(elem, view)) {
92        if (unload) {
93          elem.setAttribute('data-echo-placeholder', elem.src);
94        }
95        elem.src = elem.getAttribute('data-echo');
96        if (!unload) {
97          elem.removeAttribute('data-echo');
98        }
99        callback(elem, 'load');
100      } else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
101        elem.src = src;
102        elem.removeAttribute('data-echo-placeholder');
103        callback(elem, 'unload');
104      }
105    }
106    if (!length) {
107      echo.detach();
108    }
109  };
110
111  echo.detach = function () {
112    if (document.removeEventListener) {
113      root.removeEventListener('scroll', debounceOrThrottle);
114    } else {
115      root.detachEvent('onscroll', debounceOrThrottle);
116    }
117    clearTimeout(poll);
118  };
119
120  return echo;
121
122});
123
124$(function() {
125	echo.init({
126		offset: 100,
127		throttle: 250,
128		unload: false
129	});
130});