Add IntersectionObserverWrapper to cut down on re-renders (#3406)
parent
922fb74197
commit
34a93ccf57
3 changed files with 100 additions and 79 deletions
@ -0,0 +1,48 @@ |
|||||||
|
// Wrapper for IntersectionObserver in order to make working with it
|
||||||
|
// a bit easier. We also follow this performance advice:
|
||||||
|
// "If you need to observe multiple elements, it is both possible and
|
||||||
|
// advised to observe multiple elements using the same IntersectionObserver
|
||||||
|
// instance by calling observe() multiple times."
|
||||||
|
// https://developers.google.com/web/updates/2016/04/intersectionobserver
|
||||||
|
|
||||||
|
class IntersectionObserverWrapper { |
||||||
|
|
||||||
|
callbacks = {}; |
||||||
|
observerBacklog = []; |
||||||
|
observer = null; |
||||||
|
|
||||||
|
connect (options) { |
||||||
|
const onIntersection = (entries) => { |
||||||
|
entries.forEach(entry => { |
||||||
|
const id = entry.target.getAttribute('data-id'); |
||||||
|
if (this.callbacks[id]) { |
||||||
|
this.callbacks[id](entry); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
this.observer = new IntersectionObserver(onIntersection, options); |
||||||
|
this.observerBacklog.forEach(([ id, node, callback ]) => { |
||||||
|
this.observe(id, node, callback); |
||||||
|
}); |
||||||
|
this.observerBacklog = null; |
||||||
|
} |
||||||
|
|
||||||
|
observe (id, node, callback) { |
||||||
|
if (!this.observer) { |
||||||
|
this.observerBacklog.push([ id, node, callback ]); |
||||||
|
} else { |
||||||
|
this.callbacks[id] = callback; |
||||||
|
this.observer.observe(node); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
disconnect () { |
||||||
|
if (this.observer) { |
||||||
|
this.observer.disconnect(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default IntersectionObserverWrapper; |
Loading…
Reference in new issue