-
Notifications
You must be signed in to change notification settings - Fork 1
/
lazysrcset.js
79 lines (64 loc) · 1.78 KB
/
lazysrcset.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
(function() {
var img = document.createElement('img');
var isSupported = 'sizes' in img;
var marker = '_lazysrcset';
function getWidth(el) {
var width;
while (!width && el) {
width = el.offsetWidth;
el = el.parentElement;
}
return width;
}
function _renderImage(el) {
var width = getWidth(el);
el.setAttribute('sizes', width + 'px');
el.setAttribute('srcset', el.getAttribute('data-srcset'));
}
if (!isSupported) {
_renderImage = function(el) {
el.setAttribute('src', el.getAttribute('data-src'));
};
}
var renderImage = (function() {
var queue = [];
var scheduled = null;
function run() {
scheduled = null;
while (queue.length) {
_renderImage(queue.shift());
}
}
return function(el) {
queue.push(el);
if (!scheduled) {
scheduled = requestAnimationFrame(run);
}
};
})();
var obs = new IntersectionObserver(function(entries, obs) {
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
// isIntersecting is often `true` in FF even when it shouldn't be
if (entry.intersectionRatio > 0.01) {
renderImage(entry.target);
obs.unobserve(entry.target);
}
}
}, {rootMargin: '400px', threshold: 0.01});
function handle(e) {
var el = e.target;
el = el.body || el;
if (el.hasAttribute('data-srcset')) {
obs.observe(el);
}
var els = el.querySelectorAll('[data-srcset]');
for (var i = 0; i < els.length; i++) {
obs.observe(els[i]);
}
}
document.addEventListener('DOMContentLoaded', handle);
// here we are listening for new arriving HTML fragments from TwinSpark.js,
// modify to handle yours
document.addEventListener('ts-ready', handle);
})();