41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
import { ref, onMounted, onUnmounted, type Ref } from 'vue'
|
||
|
|
|
||
|
|
const PLACEHOLDER = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+'
|
||
|
|
|
||
|
|
export function useLazyImage(imageRef: Ref<HTMLImageElement | null>, src: string) {
|
||
|
|
const isLoaded = ref(false)
|
||
|
|
const currentSrc = ref(PLACEHOLDER)
|
||
|
|
let observer: IntersectionObserver | null = null
|
||
|
|
|
||
|
|
function onLoad() {
|
||
|
|
isLoaded.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
const el = imageRef.value
|
||
|
|
if (!el) return
|
||
|
|
|
||
|
|
observer = new IntersectionObserver(
|
||
|
|
(entries) => {
|
||
|
|
for (const entry of entries) {
|
||
|
|
if (entry.isIntersecting) {
|
||
|
|
currentSrc.value = src
|
||
|
|
el.src = src
|
||
|
|
el.addEventListener('load', onLoad, { once: true })
|
||
|
|
observer?.disconnect()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ rootMargin: '200px' }
|
||
|
|
)
|
||
|
|
|
||
|
|
observer.observe(el)
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
observer?.disconnect()
|
||
|
|
})
|
||
|
|
|
||
|
|
return { isLoaded, currentSrc, placeholder: PLACEHOLDER }
|
||
|
|
}
|