diff --git a/src/App.vue b/src/App.vue
index 077924e0..c4937498 100644
--- a/src/App.vue
+++ b/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);
-    };
+    screenshots.value.push(screenshotUrl);
   }
 };
 
diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index 7017bd67..ff578346 100644
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -21,12 +21,15 @@
             <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"
             >
-              <img
-                v-if="app"
-                :src="iconPath"
-                alt="icon"
-                class="h-full w-full object-cover"
-              />
+                <img
+                  v-if="app"
+                  :src="iconPath"
+                  alt="icon"
+                  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">
               <div class="flex items-center gap-3">
@@ -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);
 });
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index 668b3e53..ba95fd96 100644
--- a/src/components/HomeView.vue
+++ b/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>