pref: use IntersectionObserver API instead of scroll event

Author: codeacme17

src/components/IllestWaveform.vue

@@ -3,11 +3,7 @@ import { ref, onMounted, watchEffect, onUnmounted } from 'vue'
 import type { Ref } from 'vue'
 import { Wave, AudioController } from '../modules'
 import { formatSecond } from '../utils/format-time'
-import {
-  lazyLoader,
-  registerScrollHander,
-  canelScrollHander,
-} from '../utils/lazy-load'
+import { lazyLoader, unobserve } from '../utils/lazy-load'
 
 type CanvasLineCap = 'butt' | 'round' | 'square'
 
@@ -50,23 +46,14 @@ const __illestWaveformRef__ = ref<HTMLElement | null>(null)
 onMounted(async () => {
   if (props.lazy) {
     lazyLoader(__illestWaveformRef__.value as HTMLElement, lazyLoadHandler)
-    registerScrollHander(
-      __illestWaveformRef__.value as HTMLElement,
-      lazyLoadHandler
-    )
     watchEffect(async () => {
       if (renderTrigger.value) await init()
     })
   } else await init()
 })
 
 onUnmounted(() => {
-  if (props.lazy)
-    canelScrollHander(
-      __illestWaveformRef__.value as HTMLElement,
-      lazyLoadHandler
-    )
-
+  if (props.lazy) unobserve()
   audioController && audioController.pause()
 })
 

src/utils/lazy-load.ts

@@ -1,40 +1,39 @@
-// Registers a scroll event listener on the document that checks if the given
-// element is in view and calls the provided handler if it is.
-function registerScrollHander(el: HTMLElement, handler: () => void) {
-  const throttledHandler = throttle(() => lazyLoader(el, handler), 500)
-  document.addEventListener('scroll', () => throttledHandler())
-}
+class LazyLoader {
+  private el: HTMLElement
+  private handler: () => void
+  private intersectionObserver!: IntersectionObserver
+
+  constructor(el: HTMLElement, handler: () => void) {
+    this.el = el
+    this.handler = handler
+  }
+
+  public observe() {
+    const { el, handler } = this
+
+    const cb = (entries: IntersectionObserverEntry[]) => {
+      const entry = entries[0]
+      if (entry.intersectionRatio > 0) handler()
+    }
 
-// Removes the scroll event listener on the document that was previously added
-// with registerScrollHandler.
-function canelScrollHander(el: HTMLElement, handler: () => void) {
-  document.removeEventListener('scroll', () => lazyLoader(el, handler))
+    this.intersectionObserver = new IntersectionObserver(cb)
+    this.intersectionObserver.observe(el)
+  }
+
+  public unobserve() {
+    this.intersectionObserver.unobserve(this.el)
+  }
 }
 
-// Checks if the given element is in view, and if it is, calls the provided handler.
-function lazyLoader(el: HTMLElement, handler: () => void): void {
-  const windowHeight: number = window.innerHeight
-  const windowOffY: number = window.scrollY
-  const elDistanceToTop: number =
-    window.pageYOffset + el.getBoundingClientRect().top
-
-  if (
-    elDistanceToTop >= windowOffY - windowHeight / 4 &&
-    elDistanceToTop - windowOffY - windowHeight < windowHeight / 4
-  )
-    handler()
+let lz: LazyLoader
+
+function lazyLoader(el: HTMLElement, handler: () => void) {
+  lz = new LazyLoader(el, handler)
+  lz.observe()
 }
 
-// Throttle function that delays the execution of the given function until a certain time has passed since the last time it was called.
-function throttle(func: () => void, delay: number): () => void {
-  let timeout: NodeJS.Timeout | undefined
-  return () => {
-    if (!timeout)
-      timeout = setTimeout(() => {
-        func()
-        timeout = undefined
-      }, delay)
-  }
+function unobserve() {
+  lz.unobserve()
 }
 
-export { registerScrollHander, canelScrollHander, lazyLoader }
+export { lazyLoader, unobserve }