spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 09:20:18 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

feat:引入懒加载，防止弱网情况下无法正常加载应用图标或详情页图片

Browse Source
This commit is contained in:
momen
2026-02-27 23:25:38 +08:00
parent 88670be15e
commit 749cf3d3bf
3 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -349,11 +349,7 @@ const loadScreenshots = (app: App) => {
screenshots.value = []; screenshots.value = [];
for (let i = 1; i <= 5; i++) { for (let i = 1; i <= 5; i++) {
const screenshotUrl = `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${app.category}/${app.pkgname}/screen_${i}.png`; const screenshotUrl = `${APM_STORE_BASE_URL}/${window.apm_store.arch}/${app.category}/${app.pkgname}/screen_${i}.png`;
const img = new Image(); screenshots.value.push(screenshotUrl);
img.src = screenshotUrl;
img.onload = () => {
screenshots.value.push(screenshotUrl);
};
} }
}; };

27
src/components/AppDetailModal.vue
View File

@@ -21,12 +21,15 @@
<div <div
class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700" class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-inner dark:from-slate-800 dark:to-slate-700"
> >
<img <img
v-if="app" v-if="app"
:src="iconPath" :src="iconPath"
alt="icon" alt="icon"
class="h-full w-full object-cover" class="h-full w-full object-cover transition-opacity duration-300"
/> :class="isIconLoaded ? 'opacity-100' : 'opacity-0'"
loading="lazy"
@load="isIconLoaded = true"
/>
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@@ -108,7 +111,8 @@
:key="index" :key="index"
:src="screen" :src="screen"
alt="screenshot" alt="screenshot"
class="h-40 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60" class="h-40 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60"
loading="lazy"
@click="openPreview(index)" @click="openPreview(index)"
@error="hideImage" @error="hideImage"
/> />
@@ -229,6 +233,15 @@ const emit = defineEmits<{
const appPkgname = computed(() => props.app?.pkgname); const appPkgname = computed(() => props.app?.pkgname);
const isIconLoaded = ref(false);
watch(
() => props.app,
() => {
isIconLoaded.value = false;
},
);
const activeDownload = computed(() => { const activeDownload = computed(() => {
return downloads.value.find((d) => d.pkgname === props.app?.pkgname); return downloads.value.find((d) => d.pkgname === props.app?.pkgname);
}); });

6
src/components/HomeView.vue
View File

@@ -12,7 +12,11 @@
class="flex flex-col items-start gap-2 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm hover:shadow-lg transition" class="flex flex-col items-start gap-2 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm hover:shadow-lg transition"
:title="link.more" :title="link.more"
> >
<img :src="computedImgUrl(link.imgUrl)" class="h-20 w-full object-contain" /> <img
:src="computedImgUrl(link.imgUrl)"
class="h-20 w-full object-contain"
loading="lazy"
/>
<div class="text-base font-semibold text-slate-900">{{ link.name }}</div> <div class="text-base font-semibold text-slate-900">{{ link.name }}</div>
<div class="text-sm text-slate-500">{{ link.more }}</div> <div class="text-sm text-slate-500">{{ link.more }}</div>
</a> </a>