DorianandClaude Opus 4.6
1664fbbb6f
- Image lazy loading: IntersectionObserver + blur-up placeholder - Request deduplication: in-flight Promise sharing by URL+body key - Prefetch on hover: 5-minute cache for pre-fetched detail data - Memory leak audit: useCleanup() tracks intervals/listeners/observers - Background sync queue: retry failed IDB saves on visibility change - Bundle splitting: composable architecture enables tree-shaking Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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 }
|
|
}
|