From 79c606370cb38bfac4d490531587f01f997d3279 Mon Sep 17 00:00:00 2001 From: InfinityPacer <160988576+InfinityPacer@users.noreply.github.com> Date: Mon, 23 Dec 2024 02:47:37 +0800 Subject: [PATCH] feat(MediaCard): implement lazy loading for API calls --- src/components/cards/MediaCard.vue | 190 +++++++++++++++++------------ 1 file changed, 114 insertions(+), 76 deletions(-) diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue index ecbfbbb3..721f8de7 100644 --- a/src/components/cards/MediaCard.vue +++ b/src/components/cards/MediaCard.vue @@ -67,6 +67,12 @@ const sourceIconDict: { [key: string]: any } = { bangumi: bangumiImage, } +// 绑定MediaCard元素 +const mediaCardRef = ref(null) + +// 创建Intersection Observer实例 +const observer = ref(null) + // 获得mediaid function getMediaId() { if (props.media?.tmdb_id) return `tmdb:${props.media?.tmdb_id}` @@ -359,10 +365,40 @@ function handleSearch() { }) } -// 装载时检查是否已订阅 -onBeforeMount(() => { +// 懒加载检查 +function handleCheckLazy() { handleCheckSubscribe() handleCheckExists() +} + +// 在元素进入视窗时触发懒加载函数 +function setupIntersectionObserver() { + if (mediaCardRef.value) { + observer.value = new IntersectionObserver( + entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // 只要MediaCard进入视窗，就调用懒加载的操作 + handleCheckLazy() + // 加载后销毁观察者实例 + observer.value?.disconnect() + observer.value = null + } + }) + }, + { threshold: 0.1 }, + ) + observer.value.observe(mediaCardRef.value) + } +} + +onMounted(() => { + setupIntersectionObserver() +}) + +onBeforeUnmount(() => { + observer.value?.disconnect() + observer.value = null }) // 计算图片地址 @@ -407,82 +443,84 @@ function onRemoveSubscribe() {