-
Notifications
You must be signed in to change notification settings - Fork 6
/
yall.js
71 lines (68 loc) · 2.45 KB
/
yall.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
/**
* yall - yet another lazyload library using intersection observer
* @author José Moreira @ <https://github.com/giventofly/yall>
**/
//lazyload
class yall {
constructor(config = {}) {
//elems to search
this.target = config.target || "yall_lazy";
//class to add after being loaded
this.classToLoad = config.classToLoad || "yall_loaded";
//threshold
this.threshold = config.threshold || 0;
//root
this.root = document.querySelector(config.root);
//rootMargin
this.rootMargin = config.rootMargin || "0px 0px 100px 0px";
//callback
this.callback = config.callback || null;
//activate for loading="lazy" attribute https://caniuse.com/#feat=loading-lazy-attr
this.useLoading = config.useLoading || false;
//options for intersection
this.options = { threshold: this.threshold, root: this.root, rootMargin: this.rootMargin };
//if not supported in older browsers - okay not that old - load all by default
if (
!("IntersectionObserver" in window) ||
!("IntersectionObserverEntry" in window) ||
!("intersectionRatio" in window.IntersectionObserverEntry.prototype) ||
!("isIntersecting" in window.IntersectionObserverEntry.prototype) ||
//browser supports loading (and lets assume you are using the attribute loading="lazy")
(!("loading" in HTMLImageElement.prototype) && this.useLoading)
) {
this.fsafari = true;
// load all images
Array.from(document.querySelectorAll("." + this.target + ":not(" + "." + this.classToLoad + ")")).forEach(element => {
this.loadElem(element);
});
}
}
/** @param elem loads element **/
loadElem(elem) {
const src = elem.dataset.src;
const srcset = elem.dataset.srcset;
!src ? null : (elem.src = src);
!srcset ? null : (elem.srcset = srcset);
elem.classList.add(this.classToLoad);
if (this.callback) {
window[this.callback](elem);
}
}
/** run observer */
run() {
if(this.safari) { return; }
const yallObserver = new IntersectionObserver((entries, yallObserver) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
this.loadElem(entry.target);
yallObserver.unobserve(entry.target);
}
});
}, this.options);
Array.from(document.querySelectorAll("." + this.target + ":not(" + "." + this.classToLoad + ")")).forEach(element => {
yallObserver.observe(element);
});
}
}