-
Notifications
You must be signed in to change notification settings - Fork 0
/
lazy.js
61 lines (51 loc) · 1.47 KB
/
lazy.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
function BackgroundNode({node, loadedClassName}) {
let src = node.getAttribute('data-background-image-url');
let show = (onComplete) => {
requestAnimationFrame(() => {
node.style.backgroundImage = `url(${src})`
node.classList.add(loadedClassName);
onComplete();
})
}
return {
node,
// onComplete is called after the image is done loading.
load: (onComplete) => {
let img = new Image();
img.onload = show(onComplete);
img.src = src;
}
}
}
let defaultOptions = {
selector: '[data-background-image-url]',
loadedClassName: 'loaded'
}
function BackgroundLazyLoader({selector, loadedClassName} = defaultOptions) {
let nodes = [].slice.apply(document.querySelectorAll(selector))
.map(node => new BackgroundNode({node, loadedClassName}));
let callback = (entries, observer) => {
entries.forEach(({target, isIntersecting}) => {
if (!isIntersecting) {
return;
}
let obj = nodes.find(it => it.node.isSameNode(target));
if (obj) {
obj.load(() => {
// Unobserve the node:
observer.unobserve(target);
// Remove this node from our list:
nodes = nodes.filter(n => !n.node.isSameNode(target));
// If there are no remaining unloaded nodes,
// disconnect the observer since we don't need it anymore.
if (!nodes.length) {
observer.disconnect();
}
});
}
})
};
let observer = new IntersectionObserver(callback);
nodes.forEach(node => observer.observe(node.node));
};
BackgroundLazyLoader();