RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added lazyLoading end callback

Browse Source
This commit is contained in:
sairaj mote 2023-03-21 17:50:31 +05:30
parent ee587af930
commit f5bebc4c13
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
main_UI.js
View File

@ -498,7 +498,7 @@ async function routeTo(targetPage, options = {}) {
// class based lazy loading // class based lazy loading
class LazyLoader { class LazyLoader {
constructor(container, elementsToRender, renderFn, options = {}) { constructor(container, elementsToRender, renderFn, options = {}) {
const { batchSize = 10, freshRender, bottomFirst = false, domUpdated } = options const { batchSize = 10, freshRender, bottomFirst = false, onEnd } = options
this.elementsToRender = elementsToRender this.elementsToRender = elementsToRender
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || [] this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
@ -507,8 +507,8 @@ class LazyLoader {
this.batchSize = batchSize this.batchSize = batchSize
this.freshRender = freshRender this.freshRender = freshRender
this.domUpdated = domUpdated
this.bottomFirst = bottomFirst this.bottomFirst = bottomFirst
this.onEnd = onEnd
this.shouldLazyLoad = false this.shouldLazyLoad = false
this.lastScrollTop = 0 this.lastScrollTop = 0
@ -525,6 +525,10 @@ class LazyLoader {
return this.arrayOfElements return this.arrayOfElements
} }
init() { init() {
if (this.mutationObserver)
this.mutationObserver.disconnect()
if (this.intersectionObserver)
this.intersectionObserver.disconnect()
this.intersectionObserver = new IntersectionObserver((entries, observer) => { this.intersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
@ -592,8 +596,18 @@ class LazyLoader {
this.lastScrollTop += this.lazyContainer.scrollHeight - this.lastScrollHeight this.lastScrollTop += this.lazyContainer.scrollHeight - this.lastScrollHeight
this.lazyContainer.scrollTo({ top: this.lastScrollTop }) this.lazyContainer.scrollTo({ top: this.lastScrollTop })
this.lastScrollHeight = this.lazyContainer.scrollHeight this.lastScrollHeight = this.lazyContainer.scrollHeight
if (this.updateStartIndex <= 0 && this.onEnd) {
this.mutationObserver.disconnect()
this.intersectionObserver.disconnect()
this.onEnd()
}
} else { } else {
this.lazyContainer.append(frag) this.lazyContainer.append(frag)
if (this.updateEndIndex >= this.arrayOfElements.length && this.onEnd) {
this.mutationObserver.disconnect()
this.intersectionObserver.disconnect()
this.onEnd()
}
} }
if (!lazyLoad && this.bottomFirst) { if (!lazyLoad && this.bottomFirst) {
this.lazyContainer.scrollTop = this.lazyContainer.scrollHeight this.lazyContainer.scrollTop = this.lazyContainer.scrollHeight