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

src/App.vue

@@ -349,11 +349,7 @@ const loadScreenshots = (app: App) => {
   screenshots.value = [];
   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 img = new Image();
-    img.src = screenshotUrl;
-    img.onload = () => {
     screenshots.value.push(screenshotUrl);
-    };
   }
 };
 

src/components/AppDetailModal.vue

@@ -25,7 +25,10 @@
                   v-if="app"
                   :src="iconPath"
                   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 class="space-y-1">
@@ -108,7 +111,8 @@
             :key="index"
             :src="screen"
             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)"
             @error="hideImage"
           />
@@ -229,6 +233,15 @@ const emit = defineEmits<{
 
 const appPkgname = computed(() => props.app?.pkgname);
 
+const isIconLoaded = ref(false);
+
+watch(
+  () => props.app,
+  () => {
+    isIconLoaded.value = false;
+  },
+);
+
 const activeDownload = computed(() => {
   return downloads.value.find((d) => d.pkgname === props.app?.pkgname);
 });

src/components/HomeView.vue

@@ -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"
           :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-sm text-slate-500">{{ link.more }}</div>
         </a>